Feature/library card (#27)

*adjusts styling of library card * includes Roboto font families * applies "roboto" to library card --------- Co-authored-by: Jason Chen (he, him) <[email protected]>
rayzhou-bit · Oct 2, 2023 · 6c22b0a · 6c22b0a
1 parent 65da817
commit 6c22b0a
Show file tree

Hide file tree

Showing 20 changed files with 320 additions and 225 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -2,38 +2,50 @@
   box-sizing: border-box;
 
   -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Safari */
-     -khtml-user-select: none; /* Konqueror HTML */
-       -moz-user-select: none; /* Old versions of Firefox */
-        -ms-user-select: none; /* Internet Explorer/Edge */
-            user-select: none; /* Non-prefixed version, currently
+  -webkit-user-select: none; /* Safari */
+  -khtml-user-select: none; /* Konqueror HTML */
+  -moz-user-select: none; /* Old versions of Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none; /* Non-prefixed version, currently
                                   supported by Chrome, Edge, Opera and Firefox */
 }
 
 .layout {
-  position: absolute; z-index: 0;
-  top: 0; right: 0; bottom: 0; left: 0;
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
 }
 
-input:focus, textarea:focus, select:focus, button:focus {
+input:focus,
+textarea:focus,
+select:focus,
+button:focus {
   outline: none;
 }
 
-.btn-24 { // button for an img of 24px x 24px
-  height: 24px; width: 24px;
+.btn-24 {
+  // button for an img of 24px x 24px
+  height: 24px;
+  width: 24px;
   padding: 3px;
 }
 
-.btn-32 { // button for an img of 32px x 32px
-  height: 32px; width: 32px;
+.btn-32 {
+  // button for an img of 32px x 32px
+  height: 32px;
+  width: 32px;
   padding: 4px;
 }
 
-button { 
+button {
   box-sizing: content-box;
   position: relative;
-  margin: 0; border: 0;
-
+  margin: 0;
+  border: 0;
+
   place-items: center;
 
   &:hover .tooltip {
@@ -73,4 +85,10 @@ button {
     // border-bottom-color: black;  <-- tooltip is to the bottom
     // border-top-color: black;     <-- tooltip is to the top
   }
-}
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: local("Roboto-Regular"),
+    url("./fonts/Roboto-Regular.ttf") format("truetype");
+}
diff --git a/src/components/Card/index.scss b/src/components/Card/index.scss
@@ -5,20 +5,29 @@ $round-radius: 12px;
 $title-height: 32px;
 $btn-width: 26px;
 
-.active { margin: 0px; border: 3px solid #C1E9FF; }
-.not-active { margin: 2px; border: 1px solid #F4F4F4; }
+.active {
+  margin: 2px;
+  border: 1px solid #c1e9ff;
+}
+.not-active {
+  margin: 2px;
+  border: 1px solid #f4f4f4;
+}
 .card {
   position: absolute;
-  top: 0; left: 0; right: 0; bottom: 0;
-  box-shadow: 2px 2px 8px -3px #D7d6D6;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  box-shadow: 2px 2px 8px -3px #d7d6d6;
   border-radius: $round-radius;
 
   display: grid;
   grid-template-rows: $title-height auto;
 
   &:hover {
     margin: 0px;
-    border: 3px solid #C1E9FF;
+    border: 3px solid #c1e9ff;
   }
 }
 
@@ -36,24 +45,28 @@ $btn-width: 26px;
   grid-template-columns: auto $btn-width $btn-width;
   padding: 0 ($round-radius)-6px;
 
-  .dark { color: black; }
-  .light { color: white; }
+  .dark {
+    color: black;
+  }
+  .light {
+    color: white;
+  }
   .input-div {
     width: 100%;
     border-radius: $round-radius 0 0 0;
     background-color: transparent;
 
     .editing {
-      background-color: #C1E9FF;
-      color: #363B4E;
+      background-color: #c1e9ff;
+      color: #363b4e;
       user-select: default;
       -moz-user-select: default;
       -webkit-user-select: default;
       cursor: text;
     }
     .editing-2 {
-      background-color: #5BC5FF;
-      color: #363B4E;
+      background-color: #5bc5ff;
+      color: #363b4e;
       user-select: default;
       -moz-user-select: default;
       -webkit-user-select: default;
@@ -66,14 +79,14 @@ $btn-width: 26px;
       border: 0;
       background-color: transparent;
 
-      font-family: 'Roboto';
+      font-family: "Roboto";
       font-style: normal;
       font-weight: 600;
       font-size: 13px;
       line-height: 25px;
       text-align: center;
       letter-spacing: 0.05em;
-      font-feature-settings: 'kern' off;
+      font-feature-settings: "kern" off;
       color: inherit;
       text-overflow: ellipsis;
 
@@ -89,11 +102,15 @@ $btn-width: 26px;
       border-style: solid;
     }
     &:hover i {
-      border-color: #5BC5FF;
+      border-color: #5bc5ff;
     }
 
-    .dark { border-color: black; }
-    .light { border-color: white; }
+    .dark {
+      border-color: black;
+    }
+    .light {
+      border-color: white;
+    }
     .open-color-icon {
       width: 16px;
       height: 16px;
@@ -119,7 +136,9 @@ $btn-width: 26px;
       animation-fill-mode: both;
     }
     @keyframes bounce {
-      50% { transform: translateY(2px); }
+      50% {
+        transform: translateY(2px);
+      }
     }
   }
 }
@@ -129,27 +148,28 @@ $btn-width: 26px;
 
   .text {
     box-sizing: border-box;
-    height: 100%; width: 100%;
+    height: 100%;
+    width: 100%;
     padding: 18px 24px;
     margin: 0;
     border: 0;
     border-radius: inherit;
     background-color: white;
 
-    font-family: 'Roboto';
     font-style: normal;
     font-weight: 400;
     font-size: 12px;
+    font-family: "Roboto";
     line-height: 20px;
     letter-spacing: 0.05em;
-    font-feature-settings: 'kern' off;
+    font-feature-settings: "kern" off;
     color: black;
     text-overflow: ellipsis;
     resize: none;
     overflow: auto;
 
     cursor: auto;
-    
+
     &:read-only {
       cursor: default;
     }
@@ -158,7 +178,7 @@ $btn-width: 26px;
       width: 19px;
     }
     &::-webkit-scrollbar-track {
-      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
+      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
     }
     &::-webkit-scrollbar-thumb {
       background-color: darkgrey;

diff --git a/src/components/Library/Library.scss b/src/components/Library/Library.scss
@@ -3,39 +3,55 @@ $btn-divider-height: 8px;
 
 .library {
   position: fixed;
-  top: $menu-size; bottom: $menu-size;
+  top: $menu-size;
+  bottom: $menu-size;
   z-index: 80;
-  
-  -webkit-transition: .4s;
-  transition: .4s;
+
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
 
   .library-search-container {
     height: 100%;
     border-left: 1px solid black;
     background-color: white;
-    
-    -webkit-transition: .4s;
-    transition: .4s;
+
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
   }
-  
+
   .show-library {
     top: $btn-divider-height;
     height: 64px;
-    .tooltip { top: 20%; right: 130%; }
-    .tooltip::after { top: 50%; left: 100%; border-left-color: black; }
+    .tooltip {
+      top: 20%;
+      right: 130%;
+    }
+    .tooltip::after {
+      top: 50%;
+      left: 100%;
+      border-left-color: black;
+    }
   }
-  
+
   .expand-shrink {
     top: 3 * $btn-divider-height + 64px;
-    .tooltip { top: 18%; right: 130%; }
-    .tooltip::after { top: 50%; left: 100%; border-left-color: black; }
+    .tooltip {
+      top: 18%;
+      right: 130%;
+    }
+    .tooltip::after {
+      top: 50%;
+      left: 100%;
+      border-left-color: black;
+    }
   }
 }
 
 .library-menu-btn {
   position: absolute;
   left: -41px;
-  height: 32px; width: 32px;
+  height: 32px;
+  width: 32px;
   padding: 4px;
 
   background-color: lightgray;
@@ -44,4 +60,4 @@ $btn-divider-height: 8px;
   border-right: 0px;
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
-}
+}