tf-checkout-react 1.0.99 → 1.0.100-beta.2

package/src/components/account-settings/index.tsx

@@ -0,0 +1,161 @@
+import React from "react"
+import './style.css'
+import Icon from "../../../src/assets/images/Polygon.png"
+
+
+export const AccountSettings = () => {
+    return (
+        <div className="account-settings">
+            <h2>Account Settings</h2>
+            <div className="tab">
+               <div className="tab-menu">
+                   <ul>
+                       <li className="active">ACCOUNT INFO/PASSWORD</li>
+                       <li>PRIVACY SETTINGS</li>
+                       <li>ACTIVE SESSIONS</li>
+                   </ul>
+               </div>
+                <div className="tab-content">
+                    <div className="account-info">
+
+                    </div>
+                    <div className="privacy">
+                        <p>
+                            Please note: Opting Out here doesn’t mean you’ll be removed
+                            from that Brand’s mailing list outside of Restless Nites
+                            – just from communications inside our site. You’ll have
+                            to contact them directly to break ties further.
+                        </p>
+                        <div className="pr-settings">
+                            <div className="pr-settings-item">
+                                <div className="item-name">
+                                    <img src={Icon} alt="Icon"/>
+                                    <span>Das Bunker</span>
+                                </div>
+                                <div className="item-box">
+                                    <span>Opt In?</span>
+                                    <label className="checkbox-block">
+                                        <input type="checkbox" />
+                                        <span className="checkmark" />
+                                    </label>
+                                </div>
+                            </div>
+                            <div className="pr-settings-item">
+                                <div className="item-name">
+                                    <img src={Icon} alt="Icon"/>
+                                    <span>Das Bunker</span>
+                                </div>
+                                <div className="item-box">
+                                    <span>Opt In?</span>
+                                    <label className="checkbox-block">
+                                        <input type="checkbox" />
+                                        <span className="checkmark" />
+                                    </label>
+                                </div>
+                            </div>
+                            <div className="pr-settings-item">
+                                <div className="item-name">
+                                    <img src={Icon} alt="Icon"/>
+                                    <span>Das Bunker</span>
+                                </div>
+                                <div className="item-box">
+                                    <span>Opt In?</span>
+                                    <label className="checkbox-block">
+                                        <input type="checkbox" />
+                                        <span className="checkmark" />
+                                    </label>
+                                </div>
+                            </div>
+                            <div className="pr-settings-item">
+                                <div className="item-name">
+                                    <img src={Icon} alt="Icon"/>
+                                    <span>Das Bunker</span>
+                                </div>
+                                <div className="item-box">
+                                    <span>Opt In?</span>
+                                    <label className="checkbox-block">
+                                        <input type="checkbox" />
+                                        <span className="checkmark" />
+                                    </label>
+                                </div>
+                            </div>
+                            <div className="pr-settings-item">
+                                <div className="item-name">
+                                    <img src={Icon} alt="Icon"/>
+                                    <span>Das Bunker</span>
+                                </div>
+                                <div className="item-box">
+                                    <span>Opt In?</span>
+                                    <label className="checkbox-block">
+                                        <input type="checkbox" />
+                                        <span className="checkmark" />
+                                    </label>
+                                </div>
+                            </div>
+                            <div className="pr-settings-item">
+                                <div className="item-name">
+                                    <img src={Icon} alt="Icon"/>
+                                    <span>Das Bunker</span>
+                                </div>
+                                <div className="item-box">
+                                    <span>Opt In?</span>
+                                    <label className="checkbox-block">
+                                        <input type="checkbox" />
+                                        <span className="checkmark" />
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="sessions">
+                       <div className="sessions-item">
+                           <div className="sessions-info">
+                               <span>Apple – Los Angeles, United States</span>
+                               <span>Chrome – Current session</span>
+                           </div>
+                           <button>
+                               Log Out
+                           </button>
+                       </div>
+                        <div className="sessions-item">
+                            <div className="sessions-info">
+                                <span>Apple – Los Angeles, United States</span>
+                                <span>Chrome – Current session</span>
+                            </div>
+                            <button>
+                                Log Out
+                            </button>
+                        </div>
+                        <div className="sessions-item">
+                            <div className="sessions-info">
+                                <span>Apple – Los Angeles, United States</span>
+                                <span>Chrome – Current session</span>
+                            </div>
+                            <button>
+                                Log Out
+                            </button>
+                        </div>
+                        <div className="sessions-item">
+                            <div className="sessions-info">
+                                <span>Apple – Los Angeles, United States</span>
+                                <span>Chrome – Current session</span>
+                            </div>
+                            <button>
+                                Log Out
+                            </button>
+                        </div>
+                        <div className="sessions-item">
+                            <div className="sessions-info">
+                                <span>Apple – Los Angeles, United States</span>
+                                <span>Chrome – Current session</span>
+                            </div>
+                            <button>
+                                Log Out
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}

package/src/components/account-settings/style.css

@@ -0,0 +1,200 @@
+.account-settings {
+    width: 600px;
+    margin: 0 auto;
+    padding: 70px 0;
+}
+
+.account-settings h2 {
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 29px;
+    color: #000000;
+    position: relative;
+    margin: 0 0 18px 0;
+}
+
+.account-settings h2::before {
+    content: "";
+    width: 54px;
+    height: 2px;
+    background-color: #F28051;
+    position: absolute;
+    left: -65px;
+    top: 13px;
+}
+
+.tab .tab-menu ul {
+    margin: 0;
+    list-style-type: none;
+    padding-left: 0;
+    display: flex;
+    border-bottom: 1px solid #BDBDBD;
+}
+
+.tab .tab-menu {
+    margin-bottom: 45px;
+}
+
+.tab .tab-menu ul li {
+    margin-right: 70px;
+    font-family: Interbold;
+    font-size: 14px;
+    text-align: center;
+    color: #000000;
+    padding-bottom: 5px;
+    margin-bottom: -2px;
+    cursor: pointer;
+}
+
+.tab .tab-menu ul li.active {
+    border-bottom: 3px solid #F28051;
+}
+
+.tab .tab-menu ul li:last-child {
+    margin-right: 0;
+}
+
+.sessions {
+    background-color: #FFFFFF;
+    border-top: 2px solid #F28051;
+    border-bottom: 2px solid #F28051;
+}
+
+.sessions-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 30px;
+    border-bottom: 1px solid #A2A2A2;
+}
+
+.sessions .sessions-item .sessions-info {
+    display: flex;
+    flex-direction: column;
+}
+
+.sessions .sessions-item .sessions-info span {
+    font-family: InterRegular;
+    font-weight: 600;
+    font-size: 14px;
+    color: #000000;
+}
+
+.sessions .sessions-item .sessions-info span:last-child {
+    font-size: 12px;
+    color: #858585;
+}
+
+.sessions-item button {
+    font-family: InterRegular;
+    font-weight: 600;
+    font-size: 14px;
+    color: #F28051;
+    margin: 0;
+    width: 82px;
+    height: 29px;
+    background-color: #ffffff;
+    border: 1px solid #F28051;
+    text-transform: uppercase;
+}
+
+.privacy p {
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 19px;
+    letter-spacing: 0.02em;
+    color: #000000;
+}
+
+.privacy .pr-settings {
+    background-color: #ffffff;
+    border-top: 2px solid #F28051;
+    border-bottom: 2px solid #F28051;
+}
+
+.privacy .pr-settings .pr-settings-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 25px;
+    border-bottom: 1px solid #A2A2A2;
+}
+
+.privacy .pr-settings .pr-settings-item:last-child {
+    border-bottom: none;
+}
+
+.pr-settings-item .item-name img {
+    margin-right: 6px;
+}
+
+.pr-settings-item .item-name span {
+    font-family: InterRegular;
+    font-weight: 600;
+    font-size: 14px;
+    text-decoration-line: underline;
+    color: #000000;
+}
+
+.pr-settings-item .item-box span {
+    font-family: InterRegular;
+    font-weight: 600;
+    font-size: 14px;
+    color: #000000;
+    margin-right: 6px;
+}
+
+.pr-settings-item .item-box {
+    display: flex;
+    align-items: center;
+}
+
+
+/*///////////Checkbox///////////////*/
+
+.checkbox-block {
+    display: block;
+    position: relative;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    height: 22px;
+    width: 22px;
+}
+
+/* Hide the browser's default checkbox */
+.checkbox-block input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+}
+
+/* Create a custom checkbox */
+.checkmark {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 22px;
+    width: 22px;
+    background-color: #ffffff;
+    border: 1px solid #000000;
+}
+
+/* On mouse-over, add a grey background color */
+.checkbox-block:hover input ~ .checkmark {
+    background-color: #ccc;
+}
+
+/* When the checkbox is checked, add a blue background */
+.checkbox-block input:checked ~ .checkmark {
+    background-color: #F28051;
+}
+
+/* Show the checkmark when checked */
+.checkbox-block input:checked ~ .checkmark:after {
+    display: block;
+}