styles

dfinity · Dec 27, 2024 · 339fe5f · 339fe5f
1 parent 9318d21
commit 339fe5f
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 24 deletions.
diff --git a/frontend/src/lib/components/portfolio/Card.svelte b/frontend/src/lib/components/portfolio/Card.svelte
@@ -15,5 +15,6 @@
       color var(--animation-time-normal),
       box-shadow var(--animation-time-normal);
     border-radius: var(--border-radius-2x);
+    overflow: hidden;
   }
 </style>
diff --git a/frontend/src/lib/components/portfolio/LoginCard.svelte b/frontend/src/lib/components/portfolio/LoginCard.svelte
@@ -12,7 +12,7 @@
     </div>
     <div class="content">
       <h2>{$i18n.portfolio.login_title}</h2>
-      <p>{$i18n.portfolio.login_description}</p>
+      <p class="description">{$i18n.portfolio.login_description}</p>
     </div>
     <div class="action">
       <SignIn />

diff --git a/frontend/src/lib/components/portfolio/NoNeuronsCard.svelte b/frontend/src/lib/components/portfolio/NoNeuronsCard.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { i18n } from "$lib/stores/i18n";
-  import { IconAccountsPage } from "@dfinity/gix-components";
+  import { IconNeuronsPage } from "@dfinity/gix-components";
   import Card from "./Card.svelte";
 
   export let primaryCard = false;
@@ -10,16 +10,13 @@
 <Card testId="no-neurons-card">
   <div class="wrapper">
     <div class="icon">
-      <IconAccountsPage />
+      <IconNeuronsPage />
     </div>
     <div class="text">
-      <p class="description">{$i18n.portfolio.no_neurons_card_description}</p>
+      <p>{$i18n.portfolio.no_neurons_card_description}</p>
     </div>
-    <a
-      {href}
-      class="button"
-      class:primary={primaryCard}
-      class:secondary={!primaryCard}>{$i18n.portfolio.no_neurons_card_button}</a
+    <a {href} class={`button disabled ${primaryCard ? "primary" : "secondary"}`}
+      >{$i18n.portfolio.no_neurons_card_button}</a
     >
   </div>
 </Card>
@@ -32,16 +29,21 @@
 
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
-    gap: var(--padding-4x);
+    gap: var(--padding-2x);
 
-    padding: var(--padding-3x);
+    padding: var(--padding-2x);
     margin: 0 auto;
-    max-width: 400px;
     height: 100%;
     text-align: center;
 
+    @include media.min-width(medium) {
+      gap: var(--padding-4x);
+      padding: var(--padding-6x) var(--padding-4x);
+      max-width: 400px;
+    }
+
     .icon {
       width: 80px;
       height: 80px;
@@ -51,10 +53,11 @@
         height: 144px;
       }
     }
+
     .text {
+      color: var(--text-description);
       p {
         margin: 0;
-        margin-top: var(--padding);
       }
     }
   }

diff --git a/frontend/src/lib/components/portfolio/NoTokensCard.svelte b/frontend/src/lib/components/portfolio/NoTokensCard.svelte
@@ -12,8 +12,8 @@
       <IconAccountsPage />
     </div>
     <div class="text">
-      <h4>{$i18n.portfolio.no_tokens_card_title}</h4>
-      <p class="description">{$i18n.portfolio.no_tokens_card_description}</p>
+      <h5>{$i18n.portfolio.no_tokens_card_title}</h5>
+      <p>{$i18n.portfolio.no_tokens_card_description}</p>
     </div>
     <a {href} class="button primary">{$i18n.portfolio.no_tokens_card_button}</a>
   </div>
@@ -27,16 +27,21 @@
 
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: flex-start;
     align-items: center;
-    gap: var(--padding-4x);
+    gap: var(--padding-2x);
 
-    padding: var(--padding-3x);
+    padding: var(--padding-3x) var(--padding-2x);
     margin: 0 auto;
-    max-width: 450px;
     height: 100%;
     text-align: center;
 
+    @include media.min-width(medium) {
+      gap: var(--padding-4x);
+      padding: var(--padding-6x) var(--padding-4x);
+      max-width: 450px;
+    }
+
     .icon {
       width: 80px;
       height: 80px;
@@ -49,11 +54,17 @@
 
     .text {
       text-align: center;
-      h4,
+      color: var(--text-description);
+
+      h5,
       p {
         margin: 0;
         text-wrap: pretty;
       }
+      h5 {
+        color: inherit;
+        font-weight: bold;
+      }
       p {
         margin-top: var(--padding);
       }

diff --git a/frontend/src/lib/pages/Portfolio.svelte b/frontend/src/lib/pages/Portfolio.svelte
@@ -41,7 +41,6 @@
       gap: var(--padding-2x);
 
       @include media.min-width(large) {
-        display: grid;
         grid-template-columns: 1fr 2fr;
 
         > :global(article:first-of-type) {
@@ -57,12 +56,12 @@
     .content {
       display: grid;
       grid-template-columns: 1fr;
-      grid-template-rows: auto;
       gap: var(--padding-2x);
 
       @include media.min-width(large) {
-        display: grid;
         grid-template-columns: repeat(2, 1fr);
+        grid-auto-rows: min-content;
+        align-items: stretch;
       }
     }
   }