Merge pull request #193 from AgainIoT/feature/191

Modify link in modal

Author: ymw0407

src/components/common/template/TemplateBody.js

@@ -26,10 +26,11 @@ export default function TemplateBody(props) {
 }
 
 const BodyBox = styled.div`
-  display: flex,
-  justify-content: center,
-  align-items: center,
-  height: 100%,
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
 `;
+

src/components/common/template/TemplateTitle.js

@@ -1,5 +1,7 @@
+import styled from "styled-components";
 import { useRecoilState, useRecoilValue } from "recoil";
 import { modalState } from "../../../recoil/commonState";
+import GITHUB from "../../../assets/icons/github.svg";
 import {
   templateContent,
   templatePreviewState,
@@ -10,6 +12,7 @@ import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import LinkIcon from "@mui/icons-material/Link";
+import { blue } from "@mui/material/colors";
 
 // props -> type(pr, readme, contributing)
 export default function TemplateTitle(props) {
@@ -52,22 +55,27 @@ export default function TemplateTitle(props) {
           alignItems: "center",
         }}
       >
-        <Typography
-          id="PR-desc"
-          variant="h5"
-          gutterBottom
-          color="textSecondary"
-          m={2}
-        >
-          {showValue.length ? showValue[0].subtitle : ""}
+        <LinkEntireDiv>
           {showValue.length && showValue[0].repoUrl ? (
-            <LinkIcon
+            <LinkDiv
               onClick={() => {
                 window.open(showValue[0].repoUrl);
               }}
-            ></LinkIcon>
+            >
+              <GithubImg src={GITHUB} />
+              <Typography
+                id="PR-desc"
+                variant="h5"
+                gutterBottom
+                color="textSecondary"
+                m={1}
+              >
+                {showValue[0].subtitle}&nbsp;
+                <LinkIcon />
+              </Typography>
+            </LinkDiv>
           ) : null}
-        </Typography>
+        </LinkEntireDiv>
         {showValue.length && showValue[0].id ? (
           <Button
             variant="contained"
@@ -83,3 +91,20 @@ export default function TemplateTitle(props) {
     </Box>
   );
 }
+
+const GithubImg = styled.img`
+  width: 2.3rem;
+  height: 2.3rem;
+`;
+
+const LinkEntireDiv = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+const LinkDiv = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  margin-left: 1.8rem;
+`;