[ADD] NEON HOT FIX

marulloc · marulloc · commit bab1fb14772c · 2020-11-13T02:05:36.000+09:00
[why]
why...

[what]
what...

[etc]
etc...
diff --git a/Backend/Passport/github.js b/Backend/Passport/github.js
@@ -8,7 +8,7 @@ module.exports = () => {
       {
         clientID: process.env.GITHUB_ACCESS_ID,
         clientSecret: process.env.GITHUB_ACCESS_SECRET,
-        callbackURL: 'http://localhost:3000/auth/github/callback',
+        callbackURL: `${process.env.PROD_API_SERVER}:3000/auth/github/callback`,
       },
 
       async (accessToken, refreshToken, profile, done) => {
diff --git a/Backend/app.js b/Backend/app.js
@@ -23,4 +23,6 @@ app.use('/api/v1', tokenCheck, router);
 app.get('/auth/github', passport.authenticate('github', { session: false }));
 app.get('/auth/github/callback', passport.authenticate('github', { session: false }), tokenAllocate);
 
+console.log(process.env.NODE_ENV);
+
 app.listen(3000);
diff --git a/Frontend/Views/Components/IssueList/ChoiceList.js b/Frontend/Views/Components/IssueList/ChoiceList.js
@@ -1,25 +1,29 @@
 import React, { useContext } from 'react';
 import { useHistory } from 'react-router-dom';
+import styled from 'styled-components';
 import { ReloadContext } from '../../store/IssuesPageStore';
 import { IsQueryContext } from '../../store/IssuesListStore';
-import styled from 'styled-components';
+import { randomRGB } from '../../../style/Neon';
 
 const UserImg = styled.img`
   src: ${(props) => props.src};
   alt: ${(props) => props.alt};
-
+  margin-right: 5px;
   width: 20px;
   height: auto;
   border-radius: 10px;
 `;
 const UserItemWrapper = styled.div`
   display: flex;
+  padding: 5px;
 `;
 const UserItem = ({ value }) => {
   return (
     <UserItemWrapper>
       <UserImg src={value.imageLink} alt={value.username} />
-      <span>{value.username}</span>
+      <span>
+        <b>{value.username}</b>
+      </span>
     </UserItemWrapper>
   );
 };
@@ -29,40 +33,56 @@ const LabelColor = styled.div`
   min-width: 20px;
   max-height: 20px;
   border-radius: 10px;
+  margin-right: 5px;
 `;
 
 const LabelItemWrapper = styled.div`
   display: flex;
+  padding: 5px;
 `;
 const LabelItem = ({ value }) => {
   return (
     <LabelItemWrapper>
       <LabelColor color={value.color} />
       <div>
-        <div>{value.name}</div>
+        <div>
+          <b>{value.name}</b>
+        </div>
         <div>{value.description}</div>
       </div>
     </LabelItemWrapper>
   );
 };
 
+const MilestoneItemWrapper = styled.div`
+  padding: 5px;
+`;
+
 const MilestoneItem = ({ value }) => {
   return (
-    <>
-      <span>{value.title}</span>
-    </>
+    <MilestoneItemWrapper>
+      <span>
+        <b>{value.title}</b>
+      </span>
+    </MilestoneItemWrapper>
   );
 };
 
 const ChoiceListWrapper = styled.div`
+  text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #ff00de, 0 0 7px #ff00de, 0 0 8px #ff00de, 0 0 10px #ffffff, 0 0 15px #ffffff;
   position: absolute;
-  background-color: wheat;
+  background-color: ${randomRGB()};
+  border: 4px solid white;
+  color: black;
   border-radius: 5px;
   width: 200px;
   padding: 7px;
   top: 50px;
   right: 0px;
   z-index: 1;
+  & :hover {
+    color: white;
+  }
 `;
 const ChoiceList = ({ name, values, onToggleDropdown }) => {
   const { reloadDispatch } = useContext(ReloadContext);
diff --git a/Frontend/Views/Components/IssueList/Dropdown.js b/Frontend/Views/Components/IssueList/Dropdown.js
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 import useClickOutside from '../Modal';
 import ChoiceList from './ChoiceList';
-
+import { CustomButton } from '../../../style/Neon';
 const DropdownWrapper = styled.div`
   position: relative;
 `;
@@ -20,9 +20,7 @@ const Dropdown = ({ name, values }) => {
   return (
     <DropdownWrapper>
       <div ref={domNode}>
-        <button type="button" onClick={onToggleDropdown}>
-          {name}
-        </button>
+        <CustomButton onClick={onToggleDropdown}>{name}</CustomButton>
         {isVisible && <ChoiceList name={name} values={values} onToggleDropdown={onToggleDropdown} />}
       </div>
     </DropdownWrapper>
diff --git a/Frontend/Views/Components/IssueList/IssueList.js b/Frontend/Views/Components/IssueList/IssueList.js
@@ -1,5 +1,6 @@
 import React, { useContext, useEffect, useReducer } from 'react';
 import { useHistory } from 'react-router-dom';
+import styled from 'styled-components';
 import IssueListItem from './IssueListItem';
 import TopFilter from './TopFilter';
 import MarkAs from './MarkAs';
@@ -18,8 +19,7 @@ import {
   AllCheckedContext,
   IsMarkAsContext,
 } from '../../store/IssuesListStore';
-import styled from 'styled-components';
-import { randomRGB } from '../../../style/randomNeonRGB';
+import { CustomButton, randomRGB } from '../../../style/Neon';
 
 const Tab = styled.div`
   display: flex;
@@ -122,11 +122,7 @@ const IssueList = () => {
                     {!isMarkAs && <Alma users={mappedUsers} labels={mappedLabels} milestones={mappedMilestones} />}
                   </AlmaStyle>
                 </Tab>
-                {isQuery && (
-                  <button type="button" onClick={onClickReset}>
-                    Clear current search query, filters, and sorts
-                  </button>
-                )}
+                {isQuery && <CustomButton onClick={onClickReset}>Clear current search query, filters, and sorts</CustomButton>}
                 {issues.map((issue) => (
                   <IssueListItem key={issue.id} issueMetaData={getMetaData(issue)} />
                 ))}
diff --git a/Frontend/Views/Components/IssueList/IssueListItem.js b/Frontend/Views/Components/IssueList/IssueListItem.js
@@ -2,11 +2,13 @@ import React, { useEffect, useState, useContext } from 'react';
 import { useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 import { CheckedIssuesContext, IsCheckAllContext, AllCheckedContext, IsMarkAsContext } from '../../store/IssuesListStore';
-import { randomRGB } from '../../../style/randomNeonRGB';
+import { randomRGB } from '../../../style/Neon';
 
 const TitleBox = styled.div`
   width: 100%;
   display: flex;
+  text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #ff00de, 0 0 7px #ff00de, 0 0 8px #ff00de, 0 0 10px #ffffff, 0 0 15px #ffffff;
+  font-weight: bolder;
 `;
 
 const LabelStyle = styled.div`
@@ -16,26 +18,27 @@ const LabelStyle = styled.div`
   font-size: 15px;
 `;
 
+const bodyColor = randomRGB();
+
 const IssueHeader = styled.div`
   position: relative;
   align-items: center;
   font-size: 18px;
   display: flex;
-  background-color: pink;
+  background-color: ${bodyColor};
   padding: 5px;
   border-top-left-radius: 5px;
   z-index: 0;
   border-top-right-radius: 5px;
   &:hover {
-    background-color: ${randomRGB()};
     color: white;
   }
 `;
 
 const IssueWrapper = styled.div`
   margin-top: 10px;
   padding: 5px;
-  background-color: ${randomRGB()};
+  background-color: ${bodyColor};
   border-radius: 10px;
 `;
 
@@ -126,7 +129,7 @@ const IssueListItem = ({ issueMetaData }) => {
           <span>{issue.isOpen ? 'opened ' : 'closed '}</span>
           <span>{`${issue.createdAt} by `}</span>
           <span>{author.username}</span>
-          <span>{milestone && '🍗' + milestone.title}</span>
+          <span>{milestone && ` 🍗 ${milestone.title}`}</span>
         </DescriptionDiv>
         <AssingeeDiv>
           {assignees.map((assignee) => (
diff --git a/Frontend/Views/Components/IssueList/MarkAs.js b/Frontend/Views/Components/IssueList/MarkAs.js
@@ -1,8 +1,27 @@
 import React, { useState, useContext } from 'react';
 import axios from 'axios';
+import styled from 'styled-components';
 import useClickOutside from '../Modal';
 import { ReloadContext } from '../../store/IssuesPageStore';
 import { CheckedIssuesContext, AllCheckedContext, IsMarkAsContext } from '../../store/IssuesListStore';
+import { CustomButton, randomRGB } from '../../../style/Neon';
+
+const Wrapper = styled.div`
+  text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #ff00de, 0 0 7px #ff00de, 0 0 8px #ff00de, 0 0 10px #ffffff, 0 0 15px #ffffff;
+  position: absolute;
+  background-color: ${randomRGB()};
+  border: 4px solid white;
+  color: black;
+  border-radius: 5px;
+  width: 200px;
+  padding: 7px;
+  top: 50px;
+  right: 0px;
+  z-index: 1;
+  & :hover {
+    color: white;
+  }
+`;
 
 const MarkAs = () => {
   const { reloadDispatch } = useContext(ReloadContext);
@@ -41,21 +60,21 @@ const MarkAs = () => {
     };
 
     return (
-      <>
+      <Wrapper>
         <div>Actions</div>
         <div onClick={() => onChangeStatus(1)}>Open</div>
         <div onClick={() => onChangeStatus(0)}>Closed</div>
-      </>
+      </Wrapper>
     );
   };
 
   return (
     <>
       <div ref={domNode}>
-        <button type="button" onClick={onToggleDropdown}>
+        <CustomButton onClick={onToggleDropdown} style={{ position: 'relative' }}>
           Mark as
-        </button>
-        {isVisible && <MarkAsList />}
+          {isVisible && <MarkAsList />}
+        </CustomButton>
       </div>
     </>
   );
diff --git a/Frontend/Views/Components/IssueList/TopFilter.js b/Frontend/Views/Components/IssueList/TopFilter.js
@@ -1,24 +1,31 @@
 import React, { useState, useContext } from 'react';
 import { useHistory } from 'react-router-dom';
+import styled from 'styled-components';
 import useClickOutside from '../Modal';
 import { getUserId } from '../../../Sources/user';
 import { ReloadContext } from '../../store/IssuesPageStore';
 import { IsQueryContext } from '../../store/IssuesListStore';
-import styled from 'styled-components';
+import { randomRGB, CustomButton } from '../../../style/Neon';
 
 const TopFilterWrapper = styled.div`
   position: relative;
 `;
 
 const FilterWrapper = styled.div`
+  text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #ff00de, 0 0 7px #ff00de, 0 0 8px #ff00de, 0 0 10px #ff00de, 0 0 15px #ff00de;
   position: absolute;
-  background-color: wheat;
+  background-color: ${randomRGB()};
+  border: 4px solid white;
+  color: black;
   border-radius: 5px;
   width: 250px;
   padding: 7px;
   top: 50px;
   right: 0px;
   z-index: 1;
+  & :hover {
+    color: white;
+  }
 `;
 
 const TopFilter = () => {
@@ -45,18 +52,26 @@ const TopFilter = () => {
   return (
     <TopFilterWrapper>
       <div ref={domNode}>
-        <button type="button" onClick={onToggleDropdown}>
-          Filters
-        </button>
+        <CustomButton onClick={onToggleDropdown}>Filters</CustomButton>
         <input type="text" />
         {isVisible && (
           <FilterWrapper>
             <div>Filter Issues</div>
-            <div onClick={() => onClickFilter('open=1')}>Open Issues</div>
-            <div onClick={() => onClickFilter(`author=${getUserId(document.cookie)}`)}>Your Issues</div>
-            <div onClick={() => onClickFilter(`assignee=${getUserId(document.cookie)}`)}>Everything assigned to you</div>
-            <div onClick={() => onClickFilter(`mentions=${getUserId(document.cookie)}`)}>Everything mentioning you</div>
-            <div onClick={() => onClickFilter('open=0')}>Closed Issues</div>
+            <div onClick={() => onClickFilter('open=1')}>
+              <b>Open Issues</b>
+            </div>
+            <div onClick={() => onClickFilter(`author=${getUserId(document.cookie)}`)}>
+              <b>Your Issues</b>
+            </div>
+            <div onClick={() => onClickFilter(`assignee=${getUserId(document.cookie)}`)}>
+              <b>Everything assigned to you</b>
+            </div>
+            <div onClick={() => onClickFilter(`mentions=${getUserId(document.cookie)}`)}>
+              <b>Everything mentioning you</b>
+            </div>
+            <div onClick={() => onClickFilter('open=0')}>
+              <b>Closed Issues</b>
+            </div>
           </FilterWrapper>
         )}
       </div>
diff --git a/Frontend/Views/Pages/IssueMainPage.js b/Frontend/Views/Pages/IssueMainPage.js
diff --git a/Frontend/Views/Pages/LoginPage.js b/Frontend/Views/Pages/LoginPage.js
diff --git a/Frontend/style/Neon.js b/Frontend/style/Neon.js
diff --git a/Frontend/style/randomNeonRGB.js b/Frontend/style/randomNeonRGB.js

Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@ module.exports = () => {`
`8`	`8`	`{`
`9`	`9`	`clientID: process.env.GITHUB_ACCESS_ID,`
`10`	`10`	`clientSecret: process.env.GITHUB_ACCESS_SECRET,`
`11`		`- callbackURL: 'http://localhost:3000/auth/github/callback',`
	`11`	+ callbackURL: `${process.env.PROD_API_SERVER}:3000/auth/github/callback`,
`12`	`12`	`},`
`13`	`13`
`14`	`14`	`async (accessToken, refreshToken, profile, done) => {`