move svgs to assets and added product hunt button (#136)

shravan20 · May 7, 2021 · fd7e13b · fd7e13b
1 parent 4c03968
commit fd7e13b
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 30 deletions.
diff --git a/frontend/src/logo.svg → frontend/src/assets/logo.svg b/frontend/src/logo.svg → frontend/src/assets/logo.svg
diff --git a/frontend/src/moon.svg → frontend/src/assets/moon.svg b/frontend/src/moon.svg → frontend/src/assets/moon.svg
diff --git a/frontend/src/sun.svg → frontend/src/assets/sun.svg b/frontend/src/sun.svg → frontend/src/assets/sun.svg
diff --git a/frontend/src/components/Dashboard/index.js b/frontend/src/components/Dashboard/index.js
@@ -1,17 +1,17 @@
-import React,{useState} from 'react';
+import React, { useState } from 'react';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import useScrollTrigger from '@material-ui/core/useScrollTrigger';
 import Container from '@material-ui/core/Container';
-import { IconButton,Paper } from "@material-ui/core";
-import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
+import { IconButton, Paper } from '@material-ui/core';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 import { dashConstants } from '../../config/constants';
-import {LightTheme,DarkTheme} from "../../util/themes/GlobalThemes"
-import {getAppBarStyles} from "../../util/styles/componentStyles"
-import MoonIcon from '../../moon.svg';
-import LightIcon from "../../sun.svg"
+import { LightTheme, DarkTheme } from '../../util/themes/GlobalThemes';
+import { getAppBarStyles } from '../../util/styles/componentStyles';
+import MoonIcon from '../../assets/moon.svg';
+import LightIcon from '../../assets/sun.svg';
 import Home from '../Pages/Home';
 
 function ElevationScroll(props) {
@@ -31,29 +31,64 @@ function ElevationScroll(props) {
 }
 
 function Dashboard(props) {
-   const [isDark, setIsDark] = useState(false);
-   const theme = isDark ? createMuiTheme(DarkTheme) : createMuiTheme(LightTheme)
-   const classes = getAppBarStyles()
+    const [isDark, setIsDark] = useState(false);
+    const theme = isDark
+        ? createMuiTheme(DarkTheme)
+        : createMuiTheme(LightTheme);
+    const classes = getAppBarStyles();
 
-   function handleThemeChange(){
-      setIsDark(!isDark)
-   }
+    function handleThemeChange() {
+        setIsDark(!isDark);
+    }
     return (
         <React.Fragment>
             <ThemeProvider theme={theme}>
                 <Paper>
                     <CssBaseline />
                     <ElevationScroll {...props}>
-                    <AppBar>
-                        <Toolbar className = {classes.root}>
-                            <Typography variant="h6" className = {classes.title}>{dashConstants.APP_NAME}</Typography>
-                            <IconButton className = {classes.themeIcon}  onClick = {handleThemeChange} >{<img alt="Theme Icon" src={isDark ? LightIcon : MoonIcon}/>}</IconButton>
-                        </Toolbar>
-                    </AppBar>
+                        <AppBar>
+                            <Toolbar className={classes.root}>
+                                <Typography
+                                    variant='h6'
+                                    className={classes.title}
+                                >
+                                    {dashConstants.APP_NAME}
+                                </Typography>
+                                <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>
+                                <IconButton
+                                    className={classes.themeIcon}
+                                    onClick={handleThemeChange}
+                                >
+                                    {
+                                        <img
+                                            alt='Theme Icon'
+                                            src={isDark ? LightIcon : MoonIcon}
+                                        />
+                                    }
+                                </IconButton>
+                            </Toolbar>
+                        </AppBar>
                     </ElevationScroll>
                     <Toolbar />
-                    <Container style={{backgroundColor:'white'}}>
-                        <Home/>
+                    <Container style={{ backgroundColor: 'white' }}>
+                        <Home />
                     </Container>
                 </Paper>
             </ThemeProvider>

diff --git a/frontend/src/util/styles/componentStyles.js b/frontend/src/util/styles/componentStyles.js
@@ -1,13 +1,16 @@
-import { makeStyles } from "@material-ui/core";
+import { makeStyles } from '@material-ui/core';
 
 export const getAppBarStyles = makeStyles((theme) => ({
     title: {
-      flexGrow: 1,
+        flexGrow: 1,
     },
-    themeIcon:{
-        backgroundColor:"transparent !important",
-        height:"38px",
-        width:"38px",
-        boxShadow:"0px 0px 0.5px 0.5px #6e7681"
-    }
-  }));
+    themeIcon: {
+        backgroundColor: 'transparent !important',
+        height: '38px',
+        width: '38px',
+        boxShadow: '0px 0px 0.5px 0.5px #6e7681',
+    },
+    productHuntBtn: {
+        flexGrow: 1,
+    },
+}));