Adjust UI

kodxana · Jul 17, 2024 · f47527a · f47527a
1 parent 5f0f86b
commit f47527a
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "watch:v3": "npm run clear:dist ; npm run pick:manifest:v3 && npm-run-all -l -p watch:parcel watch:assets",
     "watch": "npm run watch:v3",
     "start:chrome": "web-ext run -t chromium --source-dir ./dist",
+    "start:brave": "web-ext run --target=chromium --chromium-binary=/usr/bin/brave --source-dir=./dist",
     "start:firefox": "web-ext run --source-dir ./dist",
     "test": "jest"
   },

diff --git a/src/assets/styles/common.css b/src/assets/styles/common.css
@@ -79,10 +79,11 @@ pre {
     text-align: center;
     padding: .5em 1em;
 
-    background: var(--color-dark);
+    background: rgba(255,0,0,.2);
     color: var(--color-light);
+    font-weight:500;
 
-    border-radius: .5em;
+    border-radius: 5em;
     border: unset;
 
     font: inherit;

diff --git a/src/pages/popup/main.tsx b/src/pages/popup/main.tsx
@@ -28,7 +28,7 @@ function WatchOnLbryPopup(params: {}) {
     {
       <header>
         <img id="logo" src={targetPlatformSettings.odysee.button.icon}></img>
-        <label>Watch on Odysee</label>
+        <h1>Watch on Odysee</h1>
       </header>
     }
     {

diff --git a/src/pages/popup/style.css b/src/pages/popup/style.css
@@ -10,20 +10,22 @@ header {
     padding: .75em;
     position: sticky;
     top: 0;
-    background: rgba(19, 19, 19, 0.5);
+    background: rgba(17,17,17,1);    
     justify-content: center;
     grid-auto-flow: column;
     align-items: center;
 }
 
 #logo {
     width: 3em;
+    margin-right:4px;
 }
 
 main {
     display: grid;
     gap: 2em;
     padding: 1.5em 0.5em;
+    background: rgba(17,17,17,1);
 }
 
 section {
@@ -33,8 +35,14 @@ section {
     gap: .75em;
 }
 
-label {
+h1{
     font-size: 1.75em;
+    font-weight: 900;
+    text-align: center;
+}
+
+label {
+    font-size: 1.25em;
     font-weight: bold;
     text-align: center;
 }

diff --git a/src/scripts/ytContent.tsx b/src/scripts/ytContent.tsx
@@ -41,22 +41,21 @@ import { getExtensionSettingsAsync, getSourcePlatfromSettingsFromHostname, getTa
 
     return <div
       style={{
-        display: 'grid',
-        gridTemplateRows: '36px',
-        gridAutoColumns: 'auto',
-        alignContent: 'center'
+        display: 'flex',
+        height: '36px',
+        alignContent: 'center',
+        minWidth: 'fit-content',
+        marginRight: '8px'
       }}
     >
       <a href={`${url.href}`} target='_blank' role='button'
         style={{
           display: 'flex',
           alignItems: 'center',
-          gap: '7px',
-          borderRadius: '2px',
-          padding: '0 16px',
-          margin: '0 4px',
-
-          fontWeight: 'bold',
+          gap: '0px',
+          borderRadius: '20px',
+          padding: '0 6px 0 4px',        
+          fontWeight: '500',
           border: '0',
           color: 'whitesmoke',
           fontSize: '14px',
@@ -69,8 +68,11 @@ import { getExtensionSettingsAsync, getSourcePlatfromSettingsFromHostname, getTa
           videoElement.pause()
         })}
       >
-        <img src={target.platform.button.icon} height={24} style={{ ...target.platform.button.style?.icon }} />
-        <span>{target.type === 'channel' ? 'Channel on' : 'Watch on'} {target.platform.button.platformNameText}</span>
+        <img src={target.platform.button.icon} height={24} style={{ marginRight: '6px', ...target.platform.button.style?.icon }} />
+        <span style={{ 
+          minWidth: 'fit-content',
+          whiteSpace: 'nowrap' 
+        }}>{target.type === 'channel' ? 'Channel on' : 'Watch on'} {target.platform.button.platformNameText}</span>
       </a>
     </div>
   }
@@ -81,10 +83,10 @@ import { getExtensionSettingsAsync, getSourcePlatfromSettingsFromHostname, getTa
 
     return <div
       style={{
-        display: 'grid',
-        gridTemplateRows: '36px',
-        gridAutoColumns: 'auto',
-        alignContent: 'center'
+        display: 'flex',
+        height: '48px',
+        alignContent: 'center',
+        justifyContent: 'center'
       }}
     >
       <a href={`${url.href}`} target='_blank' role='button'
@@ -107,7 +109,6 @@ import { getExtensionSettingsAsync, getSourcePlatfromSettingsFromHostname, getTa
         })}
       >
         <img src={target.platform.button.icon} height={24} style={{ ...target.platform.button.style?.icon }} />
-        <span>{target.type === 'channel' ? 'Channel on' : 'Watch on'} {target.platform.button.platformNameText}</span>
       </a>
     </div>
   }