Skip to content

GitLab

Commit 54540636 authored by 한규민's avatar 한규민
Browse files

navTabsColor

parent b9bb0fb3
Show whitespace changes
Inline Side-by-side
client/src/components/Login/Login.js
View file @ 54540636
...@@ -5,65 +5,34 @@ const Login = () => { ...@@ -5,65 +5,34 @@ const Login = () => {
const [state, setState] = useState(true) const [state, setState] = useState(true)
return ( return (
<div className={`d-flex ${styles.login} col-md-8 col-12 align-items-center`}> <div className={`d-flex flex-column col-md-5 col-10`}>
{/* nav-tabs */} {/* nav-tabs */}
<ul className="nav nav-fill nav-tabs" id="loginTab" role="tablist"> <ul className="nav nav-fill nav-tabs w-100" id="loginTab" role="tablist">
<li className="nav-item" role="presentation"> <li className="nav-item fs-10" role="presentation">
<button className="nav-link active" style={{ color: state ? "black" : "yellow", }} id="login-tab" data-bs-toggle="tab" data-bs-target="#login" type="button" role="tab" aria-controls="login" aria-selected="true" onClick={() => setState(true)}>로그인</button> <button className={`nav-link active px-2 bg-black ${styles.fontSize}`} style={{ color: state ? "black" : "yellow", background: state ? "#FEDC00" : "black"}} id="login-tab" data-bs-toggle="tab" data-bs-target="#login" type="button" role="tab" aria-controls="login" aria-selected="true" onClick={() => setState(true)}>로그인</button>
</li> </li>
<li className="nav-item" role="presentation"> <li className="nav-item" role="presentation">
<button className="nav-link bg-black" <button className={`nav-link px-2 bg-black ${styles.fontSize}`}
id="guest-tab" data-bs-toggle="tab" data-bs-target="#guest" type="button" role="tab" aria-controls="guest" aria-selected="false" onClick={() => setState(false)} style={{ color: state ? "yellow" : "black" }}>비회원 예매 확인</button> id="guest-tab" data-bs-toggle="tab" data-bs-target="#guest" type="button" role="tab" aria-controls="guest" aria-selected="false" onClick={() => setState(false)} style={{ color: state ? "yellow" : "black" }}>비회원 예매 확인</button>
</li> </li>
</ul> </ul>
<div className="tab-content" id="myTabContent"> <div className="tab-content w-100" id="myTabContent">
{/* 로그인 */} {/* 로그인 */}
<div className="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab"> <div className="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab">
<div className={styles.inputContents}> <div className="d-flex flex-column ">
<input type="text" name="id" id="id" placeholder="ID" /> <input className={styles.input} type="text" name="id" id="id" placeholder="ID" />
<input type="text" name="password" id="password" placeholder="Password" minlength="8" required /> <input className={styles.input} type="text" name="password" id="password" placeholder="Password" minlength="8" required />
<input className={styles.loginBtn} type="submit" value="Login" /> <input className="bg-ButterYellow text-dark border-0 rounded-2 mt-2" type="submit" value="Login" />
<span><a href="./signup" className={styles.SignupPage}>회원이 아니십니까?</a></span> <span><a href="./signup" className={styles.intoSignupPage}>회원이 아니십니까?</a></span>
</div> </div>
</div> </div>
{/* 비회원예매 학인 */} {/* 비회원예매 학인 */}
<div className="tab-pane fade" id="guest" role="tabpanel" aria-labelledby="guest-tab"> <div className="tab-pane fade" id="guest" role="tabpanel" aria-labelledby="guest-tab">
<table> <div className="d-flex flex-column">
<colgroup> <input type="text" name="id" id="id" placeholder="ID" />
<col class="col1" /> <input type="text" name="password" id="password" placeholder="Password" minlength="8" required />
<col />
</colgroup>
<tbody>
<tr>
<th>
<label for="guestName">이름</label>
</th>
<td><input type="text" placeholder="이름" /></td>
</tr>
<tr>
<th>
<label for="guestBirthday">생년월일</label>
</th>
<td><input type="text" placeholder="생년월일(6자리)" /></td>
</tr>
<tr>
<th>
<label for="guestMbnum">휴대폰 번호</label>
</th>
<td><input type="text" placeholder="'-'없이 입력" /></td>
</tr>
<tr>
<th>
<label for="guestPassword">비밀번호</label>
</th>
<td><input type="password" placeholder="숫자 4자리" /></td>
</tr>
<tr>
</tr>
</tbody>
</table>
<p> <p>
※ 비회원 정보 오 입력 시 예매 내역 확인/취소 및 티켓 발권이 어려울 수 있으니 다시 한번 확인해 주시기 바랍니다. ※ 비회원 정보 오 입력 시 예매 내역 확인/취소 및 티켓 발권이 어려울 수 있으니 다시 한번 확인해 주시기 바랍니다.
</p> </p>
...@@ -73,6 +42,7 @@ const Login = () => { ...@@ -73,6 +42,7 @@ const Login = () => {
</div> </div>
</div> </div>
</div> </div>
</div>
) )
} }
......
client/src/components/Login/login.module.scss
View file @ 54540636
input { .intoSignupPage{
margin: 5px 0; font-size: 8px;
padding: 5px 5px;
color:white;
}
label{
color: white;
}
.btn{
background-color: black;
color: #FEDC00;
}
.login{
flex-direction: column;
}
.box{
display: flex;
padding: 0 10px;
width: 100%;
}
.inputContents {
display: flex;
flex-direction: column;
text-decoration: none;
color: white;
}
.navLink{
background-color: yellow;
}
.loginBtn {
color : black;
background-color: #FEDC00;
border: none;
font-size: 15px;
font-weight: bold;
}
.intoSignupPage {
text-decoration: none; text-decoration: none;
color: white; color: white;
} }
.intoSignupPage:hover { .intoSignupPage:hover {
text-decoration: none; text-decoration: none;
color: #FEDC00; color: #FEDC00;
} }
.input {
margin: 0.5rem 0 0 0;
color:white;
border-radius: 3px;
}
.fontSize{
font-size: 5px;
}
\ No newline at end of file
client/src/components/Search/search.module.scss
View file @ 54540636
input[type="text"] { .icon {
cursor: pointer;
}
#searchWhite {
background: transparent; background: transparent;
border: none; border: none;
border-bottom: 2px solid #fff; border-bottom: 2px solid #fff;
...@@ -7,16 +11,12 @@ input[type="text"] { ...@@ -7,16 +11,12 @@ input[type="text"] {
border-radius: 0; border-radius: 0;
color: #fff; color: #fff;
margin-bottom: 5px; margin-bottom: 5px;
}
input[type="text"]:focus { &:focus {
background: transparent; background: transparent;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
border-color: #fff; border-color: #fff;
color: #fff; color: #fff;
} }
i {
cursor: pointer;
} }
\ No newline at end of file
client/src/components/Signup/signup.module.scss
View file @ 54540636
input {
margin: 5px 0;
padding: 5px 5px;
color:white;
}
label{
color: white;
}
.btn{
background-color: black;
color: #FEDC00;
}
.signup{
flex-direction: column;
}
ul{
padding: 0 10px;
}
.inputContents {
display: flex;
flex-direction: column;
text-decoration: none;
padding: 0 10px;
color: white;
}
.nav-link, .nav-link.active{
background-color: black;
}
.loginBtn {
color : black;
background-color: #FEDC00;
border: none;
font-size: 15px;
font-weight: bold;
}
.intoSignupPage {
text-decoration: none;
color: white;
}
.intoSignupPage:hover {
text-decoration: none;
color: #FEDC00;
}
\ No newline at end of file
client/src/pages/LoginPage.js
View file @ 54540636
...@@ -3,7 +3,7 @@ import Login from "../components/Login/Login"; ...@@ -3,7 +3,7 @@ import Login from "../components/Login/Login";
const LoginPage = () => { const LoginPage = () => {
return ( return (
<div className="bg-dark row justify-content-center"> <div className="d-flex justify-content-center bg-dark">
<Login /> <Login />
</div> </div>
) )
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment