update styling #16

archesproject · Dec 3, 2024 · 19c78e3 · 19c78e3
1 parent 0163e85
commit 19c78e3
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/arches_lingo/src/arches_lingo/components/scheme/SchemeCard.vue b/arches_lingo/src/arches_lingo/components/scheme/SchemeCard.vue
@@ -23,16 +23,21 @@ const [schemeName, schemeDescription] = getDescriptors(
 <template>
     <RouterLink
         :to="schemeURL"
-        style="text-align: center"
+        class="existing-scheme-card {"
     >
         <p>{{ schemeName }}</p>
         <p>{{ schemeDescription }}</p>
     </RouterLink>
 </template>
 
 <style scoped>
-a {
+.existing-scheme-card {
     text-decoration: none;
     color: var(--p-text-color);
+    width: inherit;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 }
 </style>
diff --git a/arches_lingo/src/arches_lingo/pages/SchemeList.vue b/arches_lingo/src/arches_lingo/pages/SchemeList.vue
@@ -24,10 +24,7 @@ onMounted(async () => {
                 "
             >
                 <!-- Create New Scheme -->
-                <li
-                    class="scheme-card"
-                    style="text-align: center"
-                >
+                <li class="scheme-card new-scheme-card">
                     Placeholder for creating new scheme
                 </li>
                 <!-- Existing Schemes -->
@@ -48,10 +45,16 @@ onMounted(async () => {
     margin: 0.5rem;
     padding: 1rem;
     border: 0.0625rem solid var(--p-menubar-border-color);
-    min-width: 300px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
     background-color: var(--p-primary-400);
+    width: 15rem;
+    height: 15rem;
+    display: flex;
+}
+.scheme-card:hover {
+    background-color: var(--p-button-primary-hover-background);
+    cursor: pointer;
+}
+.new-scheme-card {
+    text-align: center;
 }
 </style>