v1.6.4/tutorial complete

app/public/popup.html

@@ -46,19 +46,26 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
         padding: 15px;
       }
       #clear-button {
-        width: max-content;
+        font-size: 10px;
+        letter-spacing: 2px;
       }
       .mdc-switch {
         --mdc-theme-secondary: #c0f300 !important;
         --mdc-theme-surface: #ffffff !important;
         margin: 10px 5px;
       }
+      .label-container > * {
+        width: 100%;
+        text-align: center;
+        display: block;
+      }
       label {
         color: var(--mdc-theme-text-primary-on-dark);
         text-transform: uppercase;
       }
       .switch-container {
         margin: 20px 0;
+        min-width: max-content;
       }
       .switch-wrapper {
         display: flex;
@@ -73,6 +80,27 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       .switch-wrapper .label-container span {
         color: var(--mdc-theme-text-hint-on-dark);
       }
+
+      a.mdc-button {
+        font-size: 10px;
+        display: inline-flex;
+        flex: 1;
+        width: auto;
+      }
+      #divider {
+        height: 1px;
+        background: #555555;
+        position: relative;
+        margin: 15px 0;
+      }
+      #divider::before {
+        content: attr(data-title);
+        color: white;
+        top: -8px;
+        position: absolute;
+        background-color: #2c2c2c;
+        padding-right: 10px;
+      }
     </style>
     <link
       href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"
@@ -83,6 +111,30 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
   </head>
   <body>
     <script src="popup.js"></script>
+
+    <h5
+      style="
+        margin: 0;
+        color: var(--mdc-theme-text-primary-on-dark);
+        letter-spacing: 3px;
+        font-size: 14px;
+        font-weight: 400;
+        margin-bottom: 10px;
+      "
+    >
+      WATCH PARTY
+    </h5>
+    <p
+      style="
+        margin-top: 0;
+        margin-bottom: 25px !important;
+        display: block;
+        color: var(--mdc-theme-on-error);
+      "
+    >
+      To use Watch Party, head on over to any supported website.
+    </p>
+    <div data-title="LINKS" id="divider"></div>
     <a class="mdc-button" target="_blank" href="https://www.chromewatchparty.com/welcome">
       <div class="mdc-button__ripple"></div>
       <i class="material-icons mdc-button__icon" aria-hidden="true">school</i>
@@ -110,6 +162,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       <i class="material-icons mdc-button__icon" aria-hidden="true">attach_money</i>
       <span class="mdc-button__label">Donate</span>
     </a>
+    <div data-title="ACTIONS" id="divider"></div>
 
     <div class="switch-container">
       <div class="switch-wrapper">
@@ -130,7 +183,15 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
           <span>Currently showing Watch Party button</span>
         </div>
       </div>
-      <div style="width: 100%; display: block; color: var(--mdc-theme-text-hint-on-dark)">
+      <div
+        style="
+          width: 100%;
+          display: block;
+          color: var(--mdc-theme-text-hint-on-dark);
+          font-size: 12.5px;
+          text-align: center;
+        "
+      >
         Refresh page after changing show/hide status.
       </div>
     </div>