feat(message): gradiant background

project-ait · Nov 2, 2023 · cc2a2d2 · cc2a2d2
1 parent a412de0
commit cc2a2d2
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/src/lib/components/chat/messages/features/BaseFeatureMessage.svelte b/src/lib/components/chat/messages/features/BaseFeatureMessage.svelte
@@ -1,8 +1,16 @@
-<div class="feat-bg">
+<script lang="ts">
+  export let gradiant: boolean = false
+</script>
+
+<div class="feat-bg" class:gradiant={gradiant}>
   <slot />
 </div>
 
 <style>
+  .gradiant {
+    background-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
+  }
+
   .feat-bg {
     background-color: #F7F7F7;
     box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);

diff --git a/src/lib/components/chat/messages/features/FeatWeather.svelte b/src/lib/components/chat/messages/features/FeatWeather.svelte
@@ -32,7 +32,7 @@
     {/if}
   {:then res}
     <div class="appearFromVoid weather-box">
-      <BaseFeatureMessage>
+      <BaseFeatureMessage gradiant={true}>
         {dateClient.getFullMonth()}.{dateClient.getDate()}. {dateClient.getDayOfWeekCurrentKr()}
         요일 {dateClient.getHours()}시 날씨<br />
         <hr class="weather-box-hr" />