feat: dark mode modals + btn-hollow; pic-add nav;

Betarena · Feb 14, 2023 · 9bd5f6c · 9bd5f6c
1 parent ecec26b
commit 9bd5f6c
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 8 deletions.
diff --git a/src/app.css b/src/app.css
@@ -72,6 +72,7 @@ https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties */
 	--dark-theme: #292929;
 	--dark-theme-1: #4b4b4b;
   --dark-theme-1-shade: #616161;
+  --dark-theme-1-2-shade: #737373;
 	/* 
   breakpoints */
 	--mobile: 375;

diff --git a/src/lib/components/_main_/header/Header.svelte b/src/lib/components/_main_/header/Header.svelte
@@ -1100,13 +1100,18 @@ TODO:FIXME: not generating for each LANG
             [ℹ] user avatar img
             -->
 						<img
-							src={profile_avatar}
+              id="user-profile-picture"
+							src={$userBetarenaSettings?.user
+                ?.scores_user_data?.profile_photo ||
+                profile_avatar}
 							alt="Profile Icon"
 							title="Profile Avatar"
 							on:click={() =>
 								(dropdown_user_auth =
 									!dropdown_user_auth)}
 							class="cursor-pointer"
+              width=44
+              height=44
 						/>
 						<!-- 
             [ℹ] dropdown profile
@@ -2374,6 +2379,10 @@ COMPONENT STYLE
 	button#sign-in-btn:hover p {
 		color: #f5620f;
 	}
+  
+	img#user-profile-picture {
+		border-radius: 50%;
+	}
 
 	button.sports-btn {
 		padding: 10.5px 10px 9.5px 16px;

diff --git a/src/lib/components/page/profile/Modal-ConnectWallet.svelte b/src/lib/components/page/profile/Modal-ConnectWallet.svelte
@@ -2,10 +2,12 @@
 COMPONENT JS (w/ TS)
 =================-->
 <script lang="ts">
+	import { userBetarenaSettings } from '$lib/store/user-settings';
 	import { createEventDispatcher } from 'svelte';
 	import { fade } from 'svelte/transition';
 
 	import wallet from './assets/wallet.svg';
+	import metamask_icon from './assets/metamask.svg';
 
 	// ~~~~~~~~~~~~~~~~~~~~~
 	//  COMPONENT VARIABLES
@@ -83,6 +85,7 @@ COMPONENT HTML
 		class="
       s-16
       m-b-12
+      color-black-2
     "
 	>
 		Cryptocurrency wallet
@@ -93,8 +96,8 @@ COMPONENT HTML
 	<p
 		class="
       s-16
-      color-black-2
       m-b-24
+      color-grey
     "
 	>
 		Connect your crypto wallet to your Paragraph
@@ -105,13 +108,21 @@ COMPONENT HTML
   [ℹ] connect wallet action (btn)
   -->
 	<button
+    id="sign-in-metamask-btn"
 		class="
       btn-hollow
       w-500
       s-14
+      row-space-out
+      color-black-2
     "
 		on:click={() => connect_wallet_action()}
 	>
+    <img 
+      src="{metamask_icon}" 
+      alt="metamask icon"
+      class="m-r-16"
+    />
 		Connect with MetaMask
 	</button>
 </div>
@@ -150,16 +161,31 @@ COMPONENT STYLE
 		box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
 		border-radius: 12px;
 		padding: 20px;
+    padding-top: 45px;
 		text-align: -webkit-center;
 		overflow: hidden;
 	}
 	div#modal-delete-box > img#close-vector {
 		/* position */
 		position: absolute;
-		top: 30px;
-		right: 15px;
+		top: 20px;
+		right: 20px;
 		z-index: 400000002;
 	}
+  button#sign-in-metamask-btn {
+    width: auto; 
+    border-radius: 60px;
+  }
+
+  /* -----------------
+    RESPONSIVNESS
+  ----------------- */
+
+	@media only screen and (min-width: 575px) {
+		div#modal-delete-box  {
+			width: 328px;
+		}
+	}
 
   /* -----------------
     WIDGET DARK THEME 
@@ -169,4 +195,7 @@ COMPONENT STYLE
 		box-shadow: inset 0px 1px 0px var(--dark-theme-1-shade) !important;
 		background-color: var(--dark-theme-1) !important;
 	}
+  div#modal-delete-box.dark-background-1 button#sign-in-metamask-btn {
+		border: 1px solid var(--dark-theme-1-2-shade) !important;
+  }
 </style>
diff --git a/src/lib/components/page/profile/Modal-DeleteAccount.svelte b/src/lib/components/page/profile/Modal-DeleteAccount.svelte
@@ -84,6 +84,7 @@ COMPONENT HTML
 		class="
       s-16
       m-b-12
+      color-black-2
     "
 	>
 		Delete Account ?
@@ -94,7 +95,7 @@ COMPONENT HTML
 	<p
 		class="
       s-16
-      color-black-2
+      color-grey
       m-b-24
     "
 	>
@@ -118,7 +119,9 @@ COMPONENT HTML
         w-500
         s-14
         color-red-bright
+        m-r-16
       "
+      style="width: 100%"
 			on:click={() => continue_delete_account()}
 		>
 			Delete Account
@@ -127,7 +130,11 @@ COMPONENT HTML
     [ℹ] cancel action (btn)
     -->
 		<button
-			class="btn-hollow"
+			class="
+        btn-hollow
+        color-black-2
+      "
+      style="width: 100%"
 			on:click={() => toggle_modal()}
 		>
 			Cancel
@@ -169,17 +176,28 @@ COMPONENT STYLE
 		box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
 		border-radius: 12px;
 		padding: 20px;
+    padding-top: 45px;
 		text-align: -webkit-center;
 		overflow: hidden;
 	}
 	div#modal-delete-box > img#close-vector {
 		/* position */
 		position: absolute;
-		top: 30px;
-		right: 15px;
+		top: 20px;
+		right: 20px;
 		z-index: 400000002;
 	}
 
+  /* -----------------
+    RESPONSIVNESS
+  ----------------- */
+
+	@media only screen and (min-width: 575px) {
+		div#modal-delete-box  {
+			width: 328px;
+		}
+	}
+
   /* -----------------
     WIDGET DARK THEME 
   ----------------- */
@@ -188,4 +206,7 @@ COMPONENT STYLE
 		box-shadow: inset 0px 1px 0px var(--dark-theme-1-shade) !important;
 		background-color: var(--dark-theme-1) !important;
 	}
+  div#modal-delete-box.dark-background-1 button.btn-hollow {
+		border: 1px solid var(--dark-theme-1-2-shade) !important;
+  }
 </style>
diff --git a/src/lib/components/page/profile/Modal-ProfilePictureCrop.svelte b/src/lib/components/page/profile/Modal-ProfilePictureCrop.svelte
@@ -302,6 +302,7 @@ COMPONENT HTML
         w-500
         s-16
         text-left
+        color-black-2
       "
 		>
 			Profile Picture
@@ -356,6 +357,7 @@ COMPONENT HTML
 			class="
         btn-hollow
         m-r-16
+        color-black-2
       "
 			on:click={() => toggle_modal()}
 		>
@@ -498,6 +500,17 @@ COMPONENT STYLE
 		cursor: -webkit-grabbing;
 	}
 
+  /* -----------------
+    RESPONSIVNESS
+  ----------------- */
+
+	@media only screen and (min-width: 575px) {
+		div#modal-delete-box  {
+			width: 502px;
+			max-width: 502px;
+		}
+	}
+
   /* -----------------
     WIDGET DARK THEME 
   ----------------- */
@@ -506,4 +519,6 @@ COMPONENT STYLE
 		box-shadow: inset 0px 1px 0px var(--dark-theme-1-shade) !important;
 		background-color: var(--dark-theme-1) !important;
 	}
+
+
 </style>
diff --git a/src/lib/components/page/profile/Widget-AccountSettings.svelte b/src/lib/components/page/profile/Widget-AccountSettings.svelte
@@ -717,4 +717,18 @@ COMPONENT STYLE
 		background-color: var(--dark-theme-1) !important;
 	}
 
+  div#account-settings-widget-box.dark-background-1 input[type='text'] {
+    background: var(--dark-theme-1);
+    border: 1px solid var(--dark-theme-1-2-shade);
+    color: var(--white)
+  }
+
+  div#account-settings-widget-box.dark-background-1 div#settings-hr-divider {
+    background: var(--dark-theme-1);
+  }
+
+  div#account-settings-widget-box.dark-background-1 p.required-pill-tag {
+    color: var(--primary-fade)
+  }
+  
 </style>
diff --git a/src/lib/components/page/profile/assets/metamask.svg b/src/lib/components/page/profile/assets/metamask.svg