Merge pull request #15 from misslivirose/ui-update

Styling update for the extension!
Mozilla-Ocho · Nov 14, 2023 · 54b358a · 54b358a
2 parents 2e50a62 + b8414de
commit 54b358a
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 57 deletions.
diff --git a/extension/popup/memory_cache.html b/extension/popup/memory_cache.html
@@ -11,15 +11,21 @@
 
 <body>
     <div id="header"> 
-      <img id="headericon" src="../icons/MC-LogoNov23.svg" />
-      <a href="https://github.com/misslivirose/MemoryCacheExt"> <img id="linkicon" src="../icons/menu_24.png"></a>
+      <a href="https://github.com/misslivirose/MemoryCacheExt"><img id="headericon" src="../icons/MC-LogoNov23.svg" /></a>
+    </div>
+    <div class="body-container">
+      <div id="save-button" class="button primary-btn"> Save page to Memory Cache</div>
+      <div class="border"></div>
+      <div class="text-field">
+        <label for="text-note">Add quick note</label>
+        <textarea id="text-note"></textarea>
+      </div>
+      <div id="save-note" class="button secondary-btn"> Add text note</div>
     </div>
-    <div id="save-button" class="button"> <img id="saveicon" class="button-element" src="../icons/save-icon-16.png"> Add page to Memory Cache</div>
-    <hr>
-    <textarea id="text-note"></textarea>
-    <div id="save-note" class="button"> <img id="fileicon" class="button-element" src="../icons/file-icon-16.png"> Add text note</div>
-  </div>
 
+    <div class="footer">
+      <a href="https://github.com/misslivirose/Memory-Cache">View on GitHub</a>
+    </div>
   <script src="memory_cache.js"></script>
 </body>
 

diff --git a/extension/popup/styles.css b/extension/popup/styles.css
@@ -1,88 +1,104 @@
+:root {
+    --mcgradient: linear-gradient(90deg, #FFB3BB 0%, #FFDFBA 26.56%, #FFFFBA 50.52%, #87EBDA 76.04%, #BAE1FF 100%);
+    --mcgradient-hover: linear-gradient(90deg, #FFA8B1 0%, #FFD9AD 26.56%, #FFFFAD 50.52%, #80EAD8 76.04%, #ADDCFF 100%);
+    --mcgradient-active: linear-gradient(90deg, #FF9EA8 0%, #FFD29E 26.56%, #FFFF9E 50.52%, #73E8D4 76.04%, #99D3FF 100%);
+    --neutral-content: #565D6D;
+    --border-radius: 8px;   
+}
+
 body {
-    width: 265px;
     background: white;
     font-weight: 500;
-    font-size: 14px;
-    margin-bottom: 8px;
-    font-family: 'Work Sans'
+    font-size: .9em;
+    font-family: 'Work Sans';
+    width: 290px;
 }
 
 #header {
-    width: 265px;
-    height: 40px;
-
     line-height: 24px;
     font-size: 16px;
     color: black;
     background-color: white;
-
     border-bottom-color: #F0EFEF;
     border-bottom-width: 1px;
-
 }
 
-#headericon {
-    position: absolute; 
-    width: 134px;
-    height: 25px;
-    top: 9px;
-    left: 12px;
+.body-container {
+    padding:8px;
+    display:flex;
+    flex-direction: column;
 }
 
 .button {
-    width: 241px;
-    height: 24px;
-
-    margin-left: 8px;
-    margin-top: 8px;
-
+    cursor:pointer;
+    border-radius: var(--border-radius);
     line-height: 21px;
     letter-spacing: 0em;
     text-align: center;
     color: #565D6D;
-
-    display: inline-block;
-
+    padding:8px;
 }
 
-.button:hover {
-    background: #cdcdcd;
-    transition: 0.7s;
+.primary-btn {
+    background: var(--mcgradient);
 }
-
-.button:active {
-    background: rgb(255,179,186);
-    background: linear-gradient(90deg, rgba(255,179,186,1) 0%, rgba(255,179,186,1) 0%, rgba(255,223,186,1) 25%, rgba(255,255,186,1) 49%, rgba(135,235,218,1) 73%, rgba(186,225,255,1) 100%);
+.primary-btn:hover {
+    background:var(--mcgradient-hover);
+}
+.primary-btn:active {
+    background:var(--mcgradient-active);
 }
 
-.button img {
-    position: fixed;
-    left: 12px;
+.secondary-btn {
+    background: linear-gradient(white, white) padding-box,
+    linear-gradient(90deg, #FFB3BB 0%, #FFDFBA 26.56%, #FFFFBA 50.52%, #87EBDA 76.04%, #BAE1FF 100%) border-box;
+    border: 2px solid transparent;
+}
+.secondary-btn:hover {
+    background: linear-gradient(90deg, #FFD6DA 0%, #FFF6EB 26.56%, #FFFFEB 50.52%, #E0FAF6 76.04%, #EBF6FF 100%) padding-box,
+    linear-gradient(90deg, #FFA8B1 0%, #FFD9AD 26.56%, #FFFFAD 50.52%, #80EAD8 76.04%, #ADDCFF 100%) border-box;
+    border: 2px solid transparent;
+}
+.secondary-btn:active {
+    background: linear-gradient(90deg, #FFC7CD 0%, #FFEAD1 26.56%, #FFFFD6 50.52%, #CFF7F0 76.04%, #D6EDFF 100%) padding-box,
+    linear-gradient(90deg, #FFA8B1 0%, #FFD9AD 26.56%, #FFFFAD 50.52%, #80EAD8 76.04%, #ADDCFF 100%) border-box;
+    border: 2px solid transparent;
 }
 
-#linkicon {
-    position: absolute;
-    right: 8px;
-    top: 9px;
+.text-field {
+    margin-bottom:8px;
+}
+.text-field textarea {
+    width: 96%;
+}
+.text-field label {
+    color: var(--neutral-content);
 }
 
 #text-note {
-    width: 233px;
     height: 100px;
+    border-radius: var(--border-radius);
+}
 
-    margin-top: 8px;
-    margin-left: 8px;
-    margin-bottom: 8px;
-
-    border-radius: 12px;  
+.border {
+    margin:16px 0; 
+    height:1px; 
+    background-color: #C6C6C6;
+    border-radius: var(--border-radius);
 }
 
-hr {
-    color: #EDEDED
+
+.footer {
+    background-color: #F0EFEF;
+    padding:8px;
+}
+.footer a {
+    text-decoration: none;
+    color:black;
+    font-size: 14px;
+    font-weight: 400;
 }
 
-.button-element {
-    width: 16px;
-    height: 16px;
-    margin-top: 4px;
+.foooter a:hover {
+    color: var( --neutral-content);
 }