Merge branch 'main' into dependabot/npm_and_yarn/braces-3.0.3

shravan20 · Sep 23, 2024 · 24dee3e · 24dee3e
2 parents 4942541 + 9182399
commit 24dee3e
Show file tree

Hide file tree

Showing 11 changed files with 632 additions and 334 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -10,6 +10,7 @@
     "@testing-library/user-event": "^12.3.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-icons": "^5.3.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^0.2.4"
   },

diff --git a/frontend/src/components/Dashboard/discord.js b/frontend/src/components/Dashboard/discord.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import DiscordLogo from '../../assets/discord_logo.png';
-
+import styleNav from '../../styles/styleNav.css'
+import { FaDiscord } from "react-icons/fa";
 const DiscordButton = () => {
     const discordUrl = 'https://discord.gg/2nN2VqwNaK';
 
@@ -9,27 +10,37 @@ const DiscordButton = () => {
     };
 
     return (
-        <button
-            style={{
-                backgroundColor: 'white',
-                color: 'white',
-                padding: '10px 20px',
-                borderRadius: '5px',
-                border: 'none',
-                cursor: 'pointer',
-            }}
-            onClick={handleDiscordButtonClick}
-        >
-            <img
-                src={DiscordLogo}
-                alt="Discord Logo"
+        <>
+            <button
+            className="discord"
                 style={{
-                    marginRight: '5px',
-                    width: '95px',
-                    height: '28px',
+                    backgroundColor: 'white',
+                    color: 'white',
+                    padding: '10px 20px',
+                    borderRadius: '5px',
+                    border: 'none',
+                    cursor: 'pointer',
                 }}
+                onClick={handleDiscordButtonClick}
+            >
+                <img
+                    src={DiscordLogo}
+                    alt="Discord Logo"
+                    style={{
+                        marginRight: '5px',
+                        width: '95px',
+                        height: '28px',
+                    }}
+                />
+            </button>
+
+            {/* mobile */}
+            <FaDiscord 
+                onClick={handleDiscordButtonClick}
+                className='discord-sm'
             />
-        </button>
+        </>
+
     );
 };
 

diff --git a/frontend/src/components/Dashboard/index.js b/frontend/src/components/Dashboard/index.js
@@ -14,7 +14,8 @@ import MoonIcon from '../../assets/moon.svg';
 import LightIcon from '../../assets/sun.svg';
 import Home from '../Pages/Home';
 import DiscordButton from './discord';
-
+import styleNav from '../../styles/styleNav.css'
+import { FaProductHunt } from "react-icons/fa";
 const ElevationScroll = (props) => {
     const { children, window } = props;
     // Note that you normally won't need to set the window ref as useScrollTrigger
@@ -53,27 +54,30 @@ const Dashboard = (props) => {
                                     variant='h6'
                                     className={classes.title}
                                 >
-                                    {dashConstants.APP_NAME}
+                                    <div className='text'>
+                                        {dashConstants.APP_NAME}
+                                    </div>
                                 </Typography>
-                                <DiscordButton />
-                                <IconButton>
-                                    <a
-                                        href='https://www.producthunt.com/posts/dynamic-github-profile-readme-quotes?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-dynamic-github-profile-readme-quotes'
-                                        target='_blank'
-                                        rel='noreferrer'
-                                    >
-                                        <img
-                                            src='https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=276934&theme=light'
-                                            alt='Dynamic GitHub Profile Readme Quotes - Everlasting Poetic Touch to GitHub Profiles for everyone | Product Hunt'
-                                            style={{
-                                                width: ' 250px',
-                                                height: '54px',
-                                            }}
-                                            width='250'
-                                            height='54'
-                                        />
-                                    </a>
-                                </IconButton>
+                                <div className='center'>
+                                    <DiscordButton />
+
+                                        <a className='p'
+                                            href='https://www.producthunt.com/posts/dynamic-github-profile-readme-quotes?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-dynamic-github-profile-readme-quotes'
+                                            target='_blank'
+                                            rel='noreferrer'
+                                        >
+                                            <FaProductHunt className='product-sm'/>
+                                            <img
+                                                className='product'
+                                                src='https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=276934&theme=light'
+                                                alt='Dynamic GitHub Profile Readme Quotes - Everlasting Poetic Touch to GitHub Profiles for everyone | Product Hunt'
+
+                                            />
+
+                                        </a>
+
+
+                                </div>
                                 <IconButton
                                     className={classes.themeIcon}
                                     onClick={handleThemeChange}

diff --git a/frontend/src/components/Pages/Home/index.js b/frontend/src/components/Pages/Home/index.js
@@ -11,8 +11,8 @@ const Home = () => {
     const [animation, setAnimation] = useState(animations[0]);
     const [layout, setLayout] = useState(layouts[0]);
     const [font, setFont] = useState(fonts[0]);
-    const [fontColor, setFontColor] = useState("white");
-    const [bgColor, setBgColor] = useState("black");
+    const [fontColor, setFontColor] = useState(null);
+    const [bgColor, setBgColor] = useState(null);
     const [quoteType, setQuoteType] = useState("random");
 
     return (
@@ -94,8 +94,7 @@ const Home = () => {
                         value={fontColor}
                         style={{ width: 300 }}
                         onChange={(_event, newValue) => {
-                            if (newValue != null)
-                                setFontColor(newValue)
+                            setFontColor(newValue)
                         }}
                         renderInput={(params) => <TextField {...params} label="Font color" placeholder="Select a color" variant="outlined" />}
                     />
@@ -107,8 +106,7 @@ const Home = () => {
                         value={bgColor}
                         style={{ width: 300 }}
                         onChange={(_event, newValue) => {
-                            if (newValue != null)
-                                setBgColor(newValue)
+                            setBgColor(newValue)
                         }}
                         renderInput={(params) => <TextField {...params} label="Background color" placeholder="Select a color" variant="outlined" />}
                     />

diff --git a/frontend/src/components/organisms/TemplateCard/index.js b/frontend/src/components/organisms/TemplateCard/index.js
@@ -28,7 +28,7 @@ const TemplateCard = (props) => {
     author: "Open Source",
   };
 
-  const theme = mainThemes[props.theme];
+  const theme = { ...mainThemes[props.theme] };
   if (props.fontColor) {
     theme.quote_color = props.fontColor;
   }
@@ -65,7 +65,16 @@ const TemplateCard = (props) => {
     setShowSnackbar(false);
   };
 
-  const quoteUrl = `${originUrl}/quote?theme=${props.theme}&animation=${props.animation}&layout=${props.layout}&font=${props.font}&fontColor=${props.fontColor}&bgColor=${props.bgColor}&quoteType=${props.quoteType}`;
+  const params = new URLSearchParams({
+    theme: props.theme,
+    animation: props.animation,
+    layout: props.layout,
+    font: props.font,
+    quoteType: props.quoteType,
+    ...(props.bgColor && { bgColor: props.bgColor }),
+    ...(props.fontColor && { fontColor: props.fontColor })
+  });
+  const quoteUrl = `${originUrl}/quote?${params.toString()}`;
 
   function SlideTransition(prop) {
     return <Slide {...prop} direction="up" />;

diff --git a/frontend/src/styles/styleNav.css b/frontend/src/styles/styleNav.css
@@ -0,0 +1,39 @@
+.center{
+    margin: 3px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+}
+.p{
+    padding-top: 6px;
+}
+.discord-sm{
+    font-size: 30px;
+}
+.product-sm{
+    font-size: 30px;
+    color: #FF6154;
+    background-color: white;
+    border-radius: 50%;
+
+}
+@media (min-width:820px) {
+    .discord-sm{
+        display: none;
+    }
+    .product-sm{
+        display: none;
+    }
+}
+@media (max-width:820px){
+    .discord{
+        display: none;
+    }
+    .product{
+        display: none;
+    }
+    .text{
+        font-size:15px;
+    }
+}
diff --git a/frontend/src/util/layouts/index.js b/frontend/src/util/layouts/index.js
@@ -43,8 +43,8 @@ const layouts = {
         },
         structure: (template) => {
             return `<div class="container">
-                  <h3 style="color: ${template.theme.quote_color}"> ${template.quote} </h3>
-                  <p style="color: ${template.theme.quote_color}">- ${template.author === "Unknown" ? "Anonymous" : template.author
+                  <h3 > ${template.quote} </h3>
+                  <p >- ${template.author === "Unknown" ? "Anonymous" : template.author
                 } </p>
               </div>`;
         },
@@ -100,7 +100,7 @@ const layouts = {
         structure: (template) => {
             return `<div class="square-brackets-quote">
                           <blockquote>
-                              <p style="color: ${template.theme.quote_color}">${template.quote}</p>
+                              <p >${template.quote}</p>
                               <cite>${template.author === "Unknown"
                     ? "Anonymous"
                     : template.author
@@ -215,12 +215,12 @@ const layouts = {
                     <div id="borderRight"></div>
                     <div id="borderBottom"></div>
                     <div id="borderTop"></div>
-                    <span style="color: ${template.theme.quote_color}">${template.author === "Unknown"
+                    <span >${template.author === "Unknown"
                     ? "Anonymous"
                     : template.author
                 }</span>
                     <blockquote>
-                      <p style="color: ${template.theme.quote_color}"><i>${template.quote}</i></p>
+                      <p ><i>${template.quote}</i></p>
                     </blockquote>
                   </div>`;
         },
@@ -277,8 +277,8 @@ const layouts = {
         structure: (template) => {
             return `<div class="quote">
                     <blockquote>
-                      <p style="color: ${template.theme.quote_color}">${template.quote}</p>
-                      <cite style="color: ${template.theme.quote_color}">${template.author === "Unknown"
+                      <p >${template.quote}</p>
+                      <cite >${template.author === "Unknown"
                     ? "Anonymous"
                     : template.author
                 }</cite>
@@ -392,8 +392,8 @@ const layouts = {
           <div class="container">
               <div class="quote4">
                     <div class="border"></div>
-                    <div class="txt" style="color: ${template.theme.quote_color}">${template.quote}</div>
-                    <div class="from" style="color: ${template.theme.quote_color}">${template.author === "Unknown"
+                    <div class="txt" >${template.quote}</div>
+                    <div class="from" >${template.author === "Unknown"
                     ? "Anonymous"
                     : template.author
                 }</div>