入力画面のスタイリング

s-yoshiii · Jul 5, 2022 · dacd70b · dacd70b
1 parent 5e5eb3c
commit dacd70b
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 42 deletions.
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,11 +1,12 @@
 import React from "react";
-import { createGlobalStyle } from "styled-components";
+import styled, { createGlobalStyle } from "styled-components";
 import reset from "styled-reset";
 import useGallerySet from "./hooks/useGallerySet";
 import Button from "./component/Button";
 import Gallery from "./component/Gallery";
-import Setword from "./pages/Setwords";
-import Result from "./pages/Result";
+import { color } from "./utils/color";
+// import Setword from "./pages/Setwords";
+// import Result from "./pages/Result";
 
 const GlobalStyle = createGlobalStyle`
   ${reset}
@@ -71,40 +72,107 @@ function App() {
   return (
     <>
       <GlobalStyle />
-      <div className="container">
-        {isDisplay ? (
-          <>
-            <Gallery fetchData={fetchData} />
-            <button type="button" onClick={handleDisplay}>
-              表示
-            </button>
-          </>
-        ) : (
-          <>
-            <h1>My Pixabay</h1>
+      {isDisplay ? (
+        <>
+          <Gallery fetchData={fetchData} />
+          <button type="button" onClick={handleDisplay}>
+            表示
+          </button>
+        </>
+      ) : (
+        <SContainer>
+          <SInner>
+            <Sheading>PIXABAY SEARCH</Sheading>
             <form
               onSubmit={(e) => {
                 handleSubmit(e);
               }}
             >
-              <input type="text" placeholder="Search" ref={ref} />
-              <Button variant="outlined" type="submit">
-                SET
-              </Button>
-
-              <Button type="button" onClick={handleClear}>
-                ALL CLEAR
-              </Button>
+              <SInputSection>
+                <SInputWrap>
+                  <SInput type="text" placeholder="Search" ref={ref} />
+                </SInputWrap>
+                <SButtonWrap>
+                  <Button variant="outlined" type="submit">
+                    SET
+                  </Button>
+                </SButtonWrap>
+                <SButtonWrap>
+                  <Button type="button" onClick={handleClear}>
+                    ALL CLEAR
+                  </Button>
+                </SButtonWrap>
+              </SInputSection>
             </form>
             <p>{searchWords.join(",")}</p>
             <Button variant="contained" type="button" onClick={handleDisplay}>
               SHOW
             </Button>
-          </>
-        )}
-      </div>
+          </SInner>
+        </SContainer>
+      )}
     </>
   );
 }
-
+const Sheading = styled.h1`
+  color: ${color.secondary};
+  font-family: "Montserrat", sans-serif;
+  font-weight: 400;
+  font-size: 64px;
+  letter-spacing: 0.1em;
+  margin-bottom: 80px;
+`;
+const SContainer = styled.div`
+  width: 100%;
+  min-height: 100vh;
+  position: relative;
+  background: transparent;
+  padding-top: 140px;
+  text-align: center;
+  &::after {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: ${color.primary};
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+  }
+`;
+const SInner = styled.div`
+  background: #fff;
+  width: 960px;
+  margin: 0px auto;
+  padding: 60px;
+`;
+const SInputWrap = styled.div`
+  margin-bottom: 40px;
+`;
+const SInput = styled.input`
+  width: 620px;
+  padding: 15px;
+  border: 2px solid ${color.gray};
+  font-size: 24px;
+  outline: none;
+  transition: 0.3s ease;
+  &:focus,
+  &:active {
+    border-color: ${color.secondary};
+  }
+`;
+const SButtonWrap = styled.div`
+  margin-bottom: 20px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+const SInputSection = styled.div`
+  padding-bottom: 40px;
+  margin-bottom: 40px;
+  border-bottom: 1px solid ${color.labelcolor};
+`;
 export default App;
diff --git a/src/index.css b/src/index.css
diff --git a/src/utils/color.ts b/src/utils/color.ts
@@ -4,4 +4,5 @@ export const color = {
   primary: "#FBF8F1",
   secondary: "#54BAB9",
   labelcolor: "#E9DAC1",
+  gray: "#999",
 };