finished up w/ receipt webpage

acmucsd-projects · Aug 13, 2024 · e6523fa · e6523fa
1 parent 78954ea
commit e6523fa
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 9 deletions.
diff --git a/source/css/receipt.css b/source/css/receipt.css
@@ -20,6 +20,33 @@
   align-self: center;
 }
 
+#pencil-icon:hover{
+    box-shadow: rgb(109, 109, 109) 0 0 3px;
+  outline: none;
+  border-radius: 90% 50% 90% 10%;
+}
+
+#pencil-icon:focus:not(:focus-visible):not(.focus-visible) {
+    box-shadow: none;
+    outline: none;
+  }
+
+  #pencil-icon:focus {
+    box-shadow: rgb(97, 97, 97) 0 0 3px;
+    outline: none;
+  }
+
+  #pencil-icon:disabled {
+    border-color: rgba(27, 31, 35, 0.1);
+    color: rgba(255, 255, 255, 0.8);
+    cursor: default;
+  }
+
+  #pencil-icon:active {
+    background-color: rgb(188, 188, 188);
+    box-shadow: rgba(20, 70, 32, 0.2) 0 1px 0 inset;
+  }
+
 #title-icon {
   display: flex;
   align-items: flex-end;
@@ -87,6 +114,7 @@ h2 {
   object-fit: contain;
   display: block;
   margin: 0.5em 0em;
+  border-radius: 10em;
 }
 
 .right-col {
@@ -113,26 +141,26 @@ h2 {
 .share-print-back-text {
   background-color: #7c9e57;
   border: none;
-  border-radius: 10em;
+  border-radius: 7.5em;
   flex: 1 1 5em;
   width: 50vw;
   max-width: 50vw;
   max-height: 3em;
   margin: 0.5em 0em;
   font: optional;
-  font-size: 1rem;
+  font-size: 1.25em;
   font-weight: 600;
 }
 
+.share-print-back-text:hover {
+    background-color: #719150;
+  }
+
 .share-print-back-text:focus:not(:focus-visible):not(.focus-visible) {
   box-shadow: none;
   outline: none;
 }
 
-.share-print-back-text:hover {
-  background-color: #719150;
-}
-
 .share-print-back-text:focus {
   box-shadow: rgb(102, 132, 72) 0 0 3px;
   outline: none;

diff --git a/source/receipt.html b/source/receipt.html
@@ -23,8 +23,8 @@ <h1>Go Go Grocery</h1>
                 <div id="user-details">
                     <div id="title-icon">
                         <h1>Username's Day Grocery Run</h1>
-                        <button class="pencil" type="button">
-                            <img class="pencil" src="./assets/images/pencil-icon.png" alt="edit-list-name">
+                        <button  class="pencil" type="button">
+                            <img class="pencil"id="pencil-icon" src="./assets/images/pencil-icon.png" alt="edit-list-name">
                         </button>
                     </div>
                     <h2>Created Month, Day Year</h2>
@@ -78,7 +78,6 @@ <h2>Created Month, Day Year</h2>
                             <button class="share-print-back-text">Share List</button>
                             <button class="share-print-back-text">Print List</button>
                         </div>
-
                     </div>
                 </div>
             </div>