feat: add stylesheet and footer

devsheva · May 20, 2024 · 4edcbea · 4edcbea
1 parent 5d4f380
commit 4edcbea
Show file tree

Hide file tree

Showing 4 changed files with 134 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -9,6 +9,7 @@ Gemini Delete Chat is a Chrome Extension that helps to perform a bulk delete of
 - [X] Remove Checkboxes
 - [ ] Stop Event Propagation on Checkbox Click
 - [X] Bulk Delete Conversation
+- [X] Add Footer + Stylesheet
 - [ ] Publish Extension on Chrome Web Store
 - [ ] Improve Contributing Guide
   - [ ] Add code of conduct

diff --git a/manifest.json b/manifest.json
@@ -2,7 +2,7 @@
     "manifest_version": 3,
     "name": "Gemini Delete",
     "description": "Gemini Delete Chat Extension",
-    "version": "1.0",
+    "version": "1.1",
     "action": {
       "default_popup": "popup.html",
       "default_icon": "assets/gemini_icon.png"

diff --git a/popup.css b/popup.css
@@ -0,0 +1,93 @@
+/* Reset */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+body{
+    width: 240px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+/* Header */
+.header{
+    margin-bottom: 10px;
+}
+
+.header h1{
+    font-size: 16px;
+    text-align: center;
+}
+
+/* Divider */
+.divider {
+    border-top: 1.5px solid black;
+    width: 100%;
+    margin-bottom: 10px;
+}
+
+
+/* Container */
+.container{
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    align-items: start;
+}
+
+/* Row */
+.row{
+    width: 100%;
+    display: flex;
+    margin-bottom: 10px;
+    justify-content: center;
+}
+
+/* Buttons */
+button {
+    padding: 5px 10px;
+    width: 110px;
+    color: rgb(255, 255, 255);
+    border-radius: 8px;
+    transition: background-color 1s ease;
+}
+
+
+button:hover{
+    background-color: red;
+}
+
+button#add-checkbox{
+    background-color: rgba(8, 183, 66, 0.8);
+}
+
+button#remove-checkbox{
+    background-color: rgba(106, 119, 119, 0.8);
+}
+
+button#toggle-checkbox{
+    background-color: rgba(22, 157, 229, 0.8);
+}
+
+button#bulk-delete{
+    height: 40px;
+    background-color: rgba(219, 22, 22, 0.8);
+}
+
+.row button:first-child {
+    margin-right: 10px;
+}
+
+/* Footer  */
+.footer {
+}
+
+/* Link */
+a {
+    text-decoration-line: none;
+}
diff --git a/popup.html b/popup.html
@@ -1,24 +1,48 @@
 <html>
+
+<head>
+    <link rel="stylesheet" href="popup.css">
+</head>
+
 <body>
-    <h1>Gemini Delete Chat</h1>
+    <div class="header">
+        <h1>
+            Gemini Delete Chat
+        </h1>
+    </div>
+
+    <hr class="divider">
+
+    <div class="container">
+        <div class="row">
+            <button id="add-checkbox">
+                Add Checkboxes
+            </button>
 
-    <div>
-        <button id="add-checkbox">
-            Add Checkboxes
-        </button>
+            <button id="remove-checkbox">
+                Remove Checkboxes
+            </button>
+        </div>
 
-        <button id="remove-checkbox">
-            Remove Checkboxes
-        </button>
+        <div class="row">
+            <button id="toggle-checkbox">
+                Toggle Checkboxes
+            </button>
+        </div>
 
-        <button id="toggle-checkbox">
-            Toggle Checkboxes
-        </button>
+        <div class="row">
+            <button id="bulk-delete">
+                Bulk Delete
+            </button>
+        </div>
 
-        <button id="bulk-delete">
-            Bulk Delete
-        </button>
     </div>
+
+    <div class="footer">
+        © 2024 - <a target="_blank" href="https://github.com/devsheva/gemini-delete-chat">devsheva@GitHub</a>
+    </div>
+
     <script type="module" src="popup.js"></script>
 </body>
-</html>
+
+</html>