diff --git a/public/index.html b/public/index.html
index b124a77..c27b483 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,4 +1,4 @@
-
+
@@ -82,7 +82,7 @@
box-sizing: border-box;
overflow: hidden;
max-height: 100vh;
- background: linear-gradient(116.2deg, #d9e5fa -0.48%, #fad9f3 102.36%);
+ background: linear-gradient(116.2deg, #121420 -0.48%, #1e1a2c 102.36%);
}
diff --git a/src/Components/Fileupload/Fileuploadstyle.js b/src/Components/Fileupload/Fileuploadstyle.js
index c8d8b94..461a888 100644
--- a/src/Components/Fileupload/Fileuploadstyle.js
+++ b/src/Components/Fileupload/Fileuploadstyle.js
@@ -4,15 +4,14 @@ import styled from 'styled-components';
import { respondTo } from '../../styles/mixins';
export const Container = styled.div`
- background: var(--primary);
+ background: var(--container-bg);
width: 88%;
height: 310px;
padding: 1.3rem;
padding-bottom: 0.5rem;
margin: 1.5em auto;
text-align: center;
- background: #ffffff;
- box-shadow: 0px 5px 29px -4px rgba(0, 0, 0, 0.25), inset 0px 1px 5px rgba(0, 0, 0, 0.25);
+ box-shadow: var(--box-shadow);
border-radius: 30px;
& p {
diff --git a/src/Components/Footer/Footertext.js b/src/Components/Footer/Footertext.js
index a9f6b97..15f1e88 100644
--- a/src/Components/Footer/Footertext.js
+++ b/src/Components/Footer/Footertext.js
@@ -10,7 +10,7 @@ const Footer = styled.footer`
position: absolute;
bottom: 0.5rem;
font-size: 0.8rem;
- color: #000;
+ color: var(--text-color);
font-weight: var(--semi-bold);
a {
diff --git a/src/Components/Navbar/index.js b/src/Components/Navbar/index.js
index 3c6768b..0e92f0f 100644
--- a/src/Components/Navbar/index.js
+++ b/src/Components/Navbar/index.js
@@ -36,7 +36,7 @@ const Navbar = styled.nav`
const Title = styled.h1`
font-size: 1rem;
font-weight: var(--medium);
- color: #000;
+ color: var(--text-color);
${respondTo.lg`
font-size: 1.2rem;
@@ -53,7 +53,7 @@ const index = () => {
target="_blank"
rel="noreferrer"
aria-label="Github link">
-
+
diff --git a/src/Components/Ui/Searchbtn.js b/src/Components/Ui/Searchbtn.js
index 1fbcdf1..835002c 100644
--- a/src/Components/Ui/Searchbtn.js
+++ b/src/Components/Ui/Searchbtn.js
@@ -10,7 +10,7 @@ const Search = styled.button`
background: var(--lavender);
font-family: inherit;
font-weight: var(--semi-medium);
- color: #000;
+ color: var(--text-color);
border-radius: calc(var(--radius) * 2);
margin-top: 0.5rem;
letter-spacing: 0;
diff --git a/src/Components/Ui/Urlinput.js b/src/Components/Ui/Urlinput.js
index 12e7013..30f170a 100644
--- a/src/Components/Ui/Urlinput.js
+++ b/src/Components/Ui/Urlinput.js
@@ -33,7 +33,7 @@ const Url = styled(motion.input)`
padding: 0rem 2.5rem;
height: 40px;
font-family: inherit;
- color: #000;
+ color: var(--text-color);
border-radius: calc(var(--radius) * 2);
font-size: 1rem;
&::placeholder {
diff --git a/src/styles/GlobalStyle.js b/src/styles/GlobalStyle.js
index 80bbeae..372deff 100644
--- a/src/styles/GlobalStyle.js
+++ b/src/styles/GlobalStyle.js
@@ -5,18 +5,22 @@ import { createGlobalStyle } from 'styled-components';
export const GlobalStyle = createGlobalStyle`
:root {
/* Colors */
- --lavender: #d9d9f9;
- --lavenderlight: #f0f3ff;
- --lightblue: #2b2bde;
- --link: #0019f6;
- --nav: #fff;
- --cardbg: #151515;
- --Styledlinks: #394ae4;
+ --lavender: #484870;
+ --lavenderlight: #1a1a2e;
+ --lightblue: #738aff;
+ --link: #738aff;
+ --nav: #1a1a2a;
+ --cardbg: #121212;
+ --Styledlinks: #738aff;
+ --text-color: #e0e0e0;
+ --container-bg: #1f1f2c;
+ --drop-container-bg: #1a1a2e;
+ --search-container-bg: #1a1a2a;
- --border: 1.5px solid #fff;
+ --border: 1.5px solid #2a2a3a;
--radius: 0.9rem;
--card-radius: 15px 15px 0px 0px;
- --box-shadow: 0px 5px 29px -4px rgba(0, 0, 0, 0.25), inset 0px 1px 5px rgba(0, 0, 0, 0.25);
+ --box-shadow: 0px 5px 29px -4px rgba(0, 0, 0, 0.5), inset 0px 1px 5px rgba(0, 0, 0, 0.5);
/* Font Weights */
--regular: 400;
@@ -35,11 +39,11 @@ export const GlobalStyle = createGlobalStyle`
overflow: hidden;
max-height: 100vh;
width: 100%;
- color: #fff;
+ color: var(--text-color);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: 'Inter', sans-serif;
- background: linear-gradient(116.2deg, #d9e5fa -0.48%, #fad9f3 102.36%);
+ background: linear-gradient(116.2deg, #121420 -0.48%, #1e1a2c 102.36%);
text-size-adjust: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
@@ -68,10 +72,13 @@ export const GlobalStyle = createGlobalStyle`
cursor: pointer;
outline: none;
display: inline;
+ color: var(--text-color);
+ background-color: var(--lavender);
}
div,
p {
outline: none;
+ color: var(--text-color);
}
a {
text-decoration: none;
@@ -83,8 +90,34 @@ export const GlobalStyle = createGlobalStyle`
display: inline-block;
}
li {
- /* display: inline-block; */
list-style: none;
display: inline-block;
}
+
+ /* Override styles for specific components */
+ .Container {
+ background: var(--container-bg);
+ box-shadow: var(--box-shadow);
+ }
+
+ .Dropcontainer {
+ background: var(--drop-container-bg);
+ }
+
+ .Search, .Button, .Url {
+ background: var(--lavender);
+ color: var(--text-color);
+ }
+
+ .Navbar {
+ background: var(--nav);
+ }
+
+ .Title {
+ color: var(--text-color);
+ }
+
+ .Footer {
+ color: var(--text-color);
+ }
`;