client: modify styling, add loading svg

Casuals4Fun · May 14, 2024 · 27ef30b · 27ef30b
1 parent 4dacac9
commit 27ef30b
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/client/src/components/card/claim-username.css b/client/src/components/card/claim-username.css
@@ -9,7 +9,7 @@
 
 [data-theme='dark'] {
     --claim-border: #212122;
-    --username-bg: #1F1F21;
+    --username-bg: #212122;
     --username-color: #FFF;
     --username-input-bg: #0A0A0A;
     --username-input-color: #fff;
@@ -45,15 +45,13 @@
 }
 
 #claim-username .username-input {
-    position: relative;
     width: 100%;
     height: 50px;
     display: flex;
     background-color: var(--username-bg);
     border: 3px solid;
     box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
     color: var(--claim-border);
-    overflow: hidden;
 }
 
 #claim-username .username-input .domain {
@@ -80,6 +78,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    gap: 5px;
     font-size: 16px;
     font-weight: 600;
     letter-spacing: 1px;

diff --git a/client/src/components/card/claim-username.tsx b/client/src/components/card/claim-username.tsx
@@ -1,5 +1,6 @@
 import "./claim-username.css"
-import { PiArrowUpRightBold } from "react-icons/pi";
+import { PiArrowUpRightBold } from "react-icons/pi"
+// import { LoadingSVG } from "../loading/svg"
 
 const ClaimUsername = () => {
     const handleUsernameSubmit = (e: React.FormEvent<HTMLFormElement>) => {
@@ -16,6 +17,7 @@ const ClaimUsername = () => {
             <button className='submit-btn'>
                 <span>CLAIM</span>
                 <PiArrowUpRightBold size={20} color='#FFFFFF' />
+                {/* <LoadingSVG size={20} color='#FFFFFF' /> */}
             </button>
         </form>
     )

diff --git a/client/src/components/loading/svg.tsx b/client/src/components/loading/svg.tsx
@@ -2,13 +2,14 @@ import "./style.css"
 
 interface Props {
     size: number
+    color ?: string
 }
 
-const LoadingSVG: React.FC<Props> = ({ size }) => {
+const LoadingSVG: React.FC<Props> = ({ size, color }) => {
     return (
         <svg className="loading-spinner" width={size} height={size} viewBox={`0 0 16 16`} fill="none" data-view-component="true">
-            <circle cx="8" cy="8" r="7" stroke="currentColor" strokeOpacity="0.25" strokeWidth="2" vectorEffect="non-scaling-stroke" fill="none"></circle>
-            <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" vectorEffect="non-scaling-stroke"></path>
+            <circle cx="8" cy="8" r="7" stroke={color || "currentColor"} strokeOpacity="0.25" strokeWidth="2" vectorEffect="non-scaling-stroke" fill="none"></circle>
+            <path d="M15 8a7.002 7.002 0 00-7-7" stroke={color || "currentColor"} strokeWidth="2" strokeLinecap="round" vectorEffect="non-scaling-stroke"></path>
         </svg>
     )
 }