From 914d1628a3c523053dec95b5c81a0f9532add298 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Fri, 4 Nov 2022 02:54:33 +0530 Subject: [PATCH] Switching to official ID --- css/main.css | 103 +++++--------------------------------- css/main.min.css | 2 +- css/main.scss | 79 ++++------------------------- index.html | 77 ++++++++++++++-------------- scripts/floExchangeAPI.js | 2 +- 5 files changed, 63 insertions(+), 200 deletions(-) diff --git a/css/main.css b/css/main.css index 3b7f81e..813c301 100644 --- a/css/main.css +++ b/css/main.css @@ -6,7 +6,7 @@ } :root { - font-size: clamp(16px, 1.2vmax, 20px); + font-size: clamp(16px, 1.2vmax, 32px); } html, @@ -17,7 +17,6 @@ body { body { --accent-color: #2353ff; - --light-shade: rgba(var(--text-color), 0.06); --text-color: 20, 20, 20; --foreground-color: 252, 253, 255; --background-color: 241, 243, 248; @@ -29,7 +28,7 @@ body { } body[data-theme=dark] { - --accent-color: #2353ff; + --accent-color: #7e9aff; --text-color: 200, 200, 200; --foreground-color: 27, 28, 29; --background-color: 21, 22, 22; @@ -40,15 +39,6 @@ body[data-theme=dark] { body[data-theme=dark] ::-webkit-calendar-picker-indicator { filter: invert(1); } -body[data-theme=dark] a:-webkit-any-link { - filter: saturate(0.5) brightness(2); -} -body[data-theme=dark] a:-moz-any-link { - filter: saturate(0.5) brightness(2); -} -body[data-theme=dark] a:any-link { - filter: saturate(0.5) brightness(2); -} .overpass { font-family: "Overpass", sans-serif; @@ -76,7 +66,6 @@ h6 { .h3 { font-size: 3rem; line-height: 1.1; - letter-spacing: -0.02em; } .h4 { @@ -99,10 +88,6 @@ h6 { font-size: 0.85rem; } -.full-bleed { - grid-column: 1/4 !important; -} - .uppercase { text-transform: uppercase; } @@ -128,15 +113,15 @@ a { } a:-webkit-any-link:focus-visible { - outline: rgba(var(--text-color), 1) 0.1rem solid; + outline: var(--accent-color) medium solid; } a:-moz-any-link:focus-visible { - outline: rgba(var(--text-color), 1) 0.1rem solid; + outline: var(--accent-color) medium solid; } a:any-link:focus-visible { - outline: rgba(var(--text-color), 1) 0.1rem solid; + outline: var(--accent-color) medium solid; } button, @@ -205,7 +190,8 @@ button:not(:disabled), } button:disabled { - opacity: 0.5; + cursor: not-allowed; + filter: saturate(0); } .cta { @@ -324,10 +310,6 @@ sm-textarea { --background: rgba(var(--text-color), 0.06); } -sm-button { - --border-radius: 0.5rem; -} - ul { list-style: none; } @@ -750,7 +732,7 @@ ul { gap: 1.5rem; padding: 1rem; align-items: center; - background-color: var(--accent-color); + background-color: #2353ff; color: white; } @@ -820,11 +802,6 @@ ul { fill: white; } -#theme_switcher { - overflow: hidden; - width: 100%; -} - .page-layout { display: grid; grid-template-columns: 1rem minmax(0, 1fr) 1rem; @@ -843,10 +820,10 @@ ul { #homepage__hero-section { color: white; - padding: 2rem var(--side-padding) 9rem var(--side-padding); - margin: 0 calc(-1 * max(1rem, var(--side-padding))) -5.5rem calc(-1 * max(1rem, var(--side-padding))); + padding: 2rem var(--side-padding) 6rem var(--side-padding); + margin: 0 calc(-1 * max(1rem, var(--side-padding))) -1.8rem calc(-1 * max(1rem, var(--side-padding))); background-image: url(../assets/bg-1.svg); - background-color: var(--accent-color); + background-color: #2353ff; background-size: cover; } #homepage__hero-section p { @@ -855,15 +832,12 @@ ul { #refresh_button { color: var(--accent-color); - background-color: white; border: solid thin rgba(0, 0, 0, 0.2); } .fund-list__header { display: flex; align-items: center; - color: white; - align-items: center; gap: 1rem; margin-bottom: 1rem; } @@ -967,56 +941,6 @@ form select option { margin-bottom: 2rem; } -.fund-placeholder { - gap: 1rem; - padding: 1rem; - border-radius: 0.3rem; - background-color: rgba(var(--foreground-color), 1); - box-shadow: 0 1rem 2rem -1rem rgba(0, 0, 0, 0.16); -} -.fund-placeholder .placeholder__block:first-of-type { - width: min(24rem, 100%); -} -.fund-placeholder:nth-of-type(2) .placeholder__block { - -webkit-animation-delay: 0.3s; - animation-delay: 0.3s; -} -.fund-placeholder:nth-of-type(3) .placeholder__block { - -webkit-animation-delay: 0.6s; - animation-delay: 0.6s; -} -.fund-placeholder:nth-of-type(4) .placeholder__block { - -webkit-animation-delay: 0.8s; - animation-delay: 0.8s; -} - -.placeholder__block { - display: flex; - border-radius: 0.3rem; - min-width: 9rem; - padding: 1.2rem 1rem; - -webkit-animation: pulse alternate 0.6s ease infinite; - animation: pulse alternate 0.6s ease infinite; - background-color: rgba(var(--text-color), 0.1); -} - -@-webkit-keyframes pulse { - from { - opacity: 0.4; - } - to { - opacity: 1; - } -} - -@keyframes pulse { - from { - opacity: 0.4; - } - to { - opacity: 1; - } -} .investors-list { display: grid; gap: 1rem; @@ -1035,12 +959,11 @@ form select option { .fund-investor > .grid:first-of-type { width: min(40ch, 100%); } -.fund-investor__redeem { +.fund-investor__withdraw { background-color: var(--accent-color); border-radius: 3rem; padding: 0.8rem 1.5rem; - color: white; - filter: saturate(0.8); + color: rgba(var(--background-color), 1); align-self: flex-start; } .fund-investor .tag { diff --git a/css/main.min.css b/css/main.min.css index 5812b4e..090373d 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(16px,1.2vmax,20px)}html,body{height:100%;scroll-behavior:smooth}body{--accent-color: #2353ff;--light-shade: rgba(var(--text-color), 0.06);--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);color:rgba(var(--text-color), 1);background:rgba(var(--background-color), 1)}body[data-theme=dark]{--accent-color: #2353ff;--text-color: 200, 200, 200;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}body[data-theme=dark] ::-webkit-calendar-picker-indicator{filter:invert(1)}body[data-theme=dark] a:-webkit-any-link{filter:saturate(0.5) brightness(2)}body[data-theme=dark] a:-moz-any-link{filter:saturate(0.5) brightness(2)}body[data-theme=dark] a:any-link{filter:saturate(0.5) brightness(2)}.overpass{font-family:"Overpass",sans-serif;font-weight:700}h1,h2,h3,h4,h5,h6{font-family:"Overpass",sans-serif;font-weight:700}.h1{font-size:6rem}.h2{font-size:4rem}.h3{font-size:3rem;line-height:1.1;letter-spacing:-0.02em}.h4{font-size:2rem}.h5{font-size:1.5rem}.h6{font-size:1.2rem}.body-1{font-size:1rem}.body-2{font-size:.85rem}.full-bleed{grid-column:1/4 !important}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}p{font-size:.8;max-width:70ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}img{-o-object-fit:cover;object-fit:cover}a{color:var(--accent-color)}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}button,.button{-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:rgba(0,0,0,0);overflow:hidden;color:inherit;-webkit-tap-highlight-color:rgba(0,0,0,0);align-items:center;font-size:.9rem;font-weight:500;white-space:nowrap;padding:.8rem;border-radius:.3rem;justify-content:center}button:focus-visible,.button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled),.button:not(:disabled){cursor:pointer}.button{background-color:rgba(var(--text-color), 0.02);border:solid thin rgba(var(--text-color), 0.06)}.button--primary{color:rgba(var(--background-color), 1) !important}.button--primary .icon{fill:rgba(var(--background-color), 1)}.button--danger{color:var(--danger-color)}.button--danger .icon{fill:var(--danger-color)}.button--primary{background-color:var(--accent-color)}.button--colored{color:var(--accent-color)}.button--colored .icon{fill:var(--accent-color)}.button--small{padding:.4rem .6rem}.button--outlined{border:solid rgba(var(--text-color), 0.3) .1rem;background-color:rgba(var(--foreground-color), 1)}.button--transparent{background-color:rgba(0,0,0,0)}button:disabled{opacity:.5}.cta{text-transform:uppercase;font-weight:700;letter-spacing:.05em;padding:.8rem 1rem}a:-webkit-any-link{position:relative;display:inline-flex;align-items:center;background:none;cursor:pointer;outline:none;color:var(--accent-color);font-weight:500;font-size:.8rem;border-radius:.3rem;padding:.4rem .6rem;align-self:flex-start;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);border:1px solid var(--accent-color)}a:-moz-any-link{position:relative;display:inline-flex;align-items:center;background:none;cursor:pointer;outline:none;color:var(--accent-color);font-weight:500;font-size:.8rem;border-radius:.3rem;padding:.4rem .6rem;align-self:flex-start;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);border:1px solid var(--accent-color)}a:any-link{position:relative;display:inline-flex;align-items:center;background:none;cursor:pointer;outline:none;color:var(--accent-color);font-weight:500;font-size:.8rem;border-radius:.3rem;padding:.4rem .6rem;align-self:flex-start;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);border:1px solid var(--accent-color)}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}.icon{height:1.2rem;width:1.2rem;fill:rgba(var(--text-color), 1)}.multi-state-button{display:grid;text-align:center;align-items:center}.multi-state-button>*{grid-area:1/1/2/2}.multi-state-button button{z-index:1}.multi-state-button sm-spinner{justify-self:center}sm-spinner{--size: 1.5rem;--stroke-width: 0.1rem}.password-field label{display:flex;justify-content:center}.password-field label input:checked~.visible{display:none}.password-field label input:not(:checked)~.invisible{display:none}sm-input,sm-textarea{--border-radius: 0.5rem;--background: rgba(var(--text-color), 0.06)}sm-button{--border-radius: 0.5rem}ul{list-style:none}.accent-color{color:var(--accent-color)}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.grid{display:grid}.grid-3{grid-template-columns:repeat(auto-fill, minmax(8rem, 1fr))}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.pos-relative{position:relative}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-items-center{align-items:center}.align-end{align-content:flex-end}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-end{justify-content:end}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.margin-top-1-5{margin-top:1.5rem}.margin-bottom-0-5r{margin-bottom:.5rem}.margin-bottom-1r{margin-bottom:1rem}.margin-bottom-1-5r{margin-bottom:1.5rem}.margin-bottom-2r{margin-bottom:2rem}.margin-bottom-3r{margin-bottom:3rem}.margin-bottom-4r{margin-bottom:4rem}.margin-left-0-5{margin-left:.5rem}.margin-right-0-5{margin-right:.5rem}.color-0-9{color:rgba(var(--text-color), 0.9)}.color-0-8{color:rgba(var(--text-color), 0.8)}.color-0-7{color:rgba(var(--text-color), 0.7)}.weight-400{font-weight:400}.weight-500{font-weight:500}.weight-700{font-weight:700}.weight-900{font-weight:900}.hide{opacity:0;pointer-events:none}.hidden{display:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.popup__header{position:relative;display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr}.popup__header>*{grid-row:1}.popup__header h3,.popup__header h4{grid-column:1/-1;justify-self:center;align-self:center}.popup__header__close{grid-column:1}#loading_page,#error_page{position:relative;display:grid;height:100%;place-content:center;justify-items:center}.sad-face{height:6rem;margin:1rem;fill:rgba(var(--text-color), 1)}.sad-face .eyes{transform-origin:center;-webkit-animation:blink 1s infinite alternate;animation:blink 1s infinite alternate}.sad-face .face{-webkit-animation:nod 2s 1s;animation:nod 2s 1s}@-webkit-keyframes blink{0%{transform:scaleY(1)}80%{transform:scaleY(1)}100%{transform:scaleY(0)}}@keyframes blink{0%{transform:scaleY(1)}80%{transform:scaleY(1)}100%{transform:scaleY(0)}}@-webkit-keyframes nod{0%{transform:translateX(0)}20%{transform:translateX(-1.5rem)}30%{transform:translateX(1.5rem)}40%{transform:translateX(-1rem)}50%{transform:translateX(1rem)}60%{transform:translateX(-0.7rem)}70%{transform:translateX(0.7rem)}80%{transform:translateX(-0.5rem)}90%{transform:translateX(0.5rem)}100%{transform:translateX(0)}}@keyframes nod{0%{transform:translateX(0)}20%{transform:translateX(-1.5rem)}30%{transform:translateX(1.5rem)}40%{transform:translateX(-1rem)}50%{transform:translateX(1rem)}60%{transform:translateX(-0.7rem)}70%{transform:translateX(0.7rem)}80%{transform:translateX(-0.5rem)}90%{transform:translateX(0.5rem)}100%{transform:translateX(0)}}.page__footer{position:absolute;padding:3rem;bottom:0}#rm_logo{width:auto;height:2rem;fill:rgba(var(--text-color), 1)}#loader{display:flex;position:relative;width:4rem;height:8rem;fill:none;stroke-width:4;stroke-linecap:round;stroke:rgba(var(--text-color), 1)}#loader polyline:nth-of-type(2),#loader polyline:nth-of-type(3),#loader polyline:nth-of-type(4){stroke-dasharray:60;-webkit-animation:loading infinite 1s;animation:loading infinite 1s}@-webkit-keyframes loading{0%{stroke-dashoffset:-60}50%{stroke-dashoffset:0}100%{stroke-dashoffset:60}}@keyframes loading{0%{stroke-dashoffset:-60}50%{stroke-dashoffset:0}100%{stroke-dashoffset:60}}#main_header{position:relative;display:grid;gap:1.5rem;padding:1rem;align-items:center;background-color:var(--accent-color);color:#fff}#main_header__logo{fill:#fff;height:1.5rem;width:1.5rem}.header__company-name{font-size:1em;font-weight:500}#current_price{justify-self:flex-start}#usd-rate{display:flex;align-items:center}#usd-rate::before{content:"";width:1px;height:2rem;background-color:#fff;margin-right:1rem}.dropdown{display:flex;justify-content:flex-end;z-index:5}.dropdown__panel{position:absolute;display:grid;left:0;right:0;top:100%;margin:0 1rem;margin-top:.5rem;border-radius:.3rem;grid-template-columns:1fr;justify-content:flex-start;color:rgba(var(--text-color), 1);width:min(24rem,100vw - 2rem);background-color:rgba(var(--foreground-color), 1);box-shadow:0 2rem 2rem -0.5rem rgba(0,0,0,.16)}.dropdown__panel li{padding:1rem}#profile_button{align-items:center;justify-content:center;border:none;justify-self:flex-end;border-radius:50%;padding:.5rem;background-color:rgba(0,0,0,.16)}#profile_button .icon{fill:#fff}#theme_switcher{overflow:hidden;width:100%}.page-layout{display:grid;grid-template-columns:1rem minmax(0, 1fr) 1rem}.page-layout>*{grid-column:2/3}#home_page{--side-padding: 1rem;display:flex;flex-direction:column;padding:0 max(1rem,var(--side-padding));padding-bottom:6rem}#homepage__hero-section{color:#fff;padding:2rem var(--side-padding) 9rem var(--side-padding);margin:0 calc(-1*max(1rem,var(--side-padding))) -5.5rem calc(-1*max(1rem,var(--side-padding)));background-image:url(../assets/bg-1.svg);background-color:var(--accent-color);background-size:cover}#homepage__hero-section p{color:rgba(255,255,255,.8)}#refresh_button{color:var(--accent-color);background-color:#fff;border:solid thin rgba(0,0,0,.2)}.fund-list__header{display:flex;align-items:center;color:#fff;align-items:center;gap:1rem;margin-bottom:1rem}#search_investor{position:-webkit-sticky;position:sticky;top:1rem;--background: rgba(var(--foreground-color), 1);border:solid thin rgba(var(--text-color), 0.2);color:rgba(var(--text-color), 1);--padding: 1rem;width:min(26rem,100%);align-self:center;margin-bottom:1.5rem;border-radius:.5rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.1);z-index:1}.label{font-weight:500;font-size:.85rem;margin-bottom:.3rem;color:rgba(var(--text-color), 0.8)}.value{font-weight:700;font-size:1rem;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;min-width:6rem}.warning-container{padding:1rem;margin-bottom:1rem;border-radius:.3rem;background-color:rgba(var(--foreground-color), 1);box-shadow:0 1rem 2rem -1rem rgba(0,0,0,.16)}#fund_list{display:flex;flex-direction:column;gap:1rem}#fund_list__empty-state{padding:4rem 0;border-radius:.3rem;place-content:center;margin-bottom:3rem;background-color:rgba(var(--foreground-color), 1);box-shadow:0 1rem 2rem -1rem rgba(0,0,0,.16)}#fund_list__empty-state .icon--big{height:6rem;width:6rem;justify-self:center}form{padding:1rem;border-radius:.3rem;width:min(32rem,100%);margin-bottom:3rem;background:rgba(var(--foreground-color), 1)}form input{display:inline-flex;color:inherit;font-family:inherit;padding:.6rem;border:none;box-shadow:0 0 0 1px rgba(var(--text-color), 0.3);background-color:rgba(var(--text-color), 0.06);flex:1}form select option{color:inherit;background-color:rgba(var(--text-color), 0.1)}.investor-input{gap:.5rem}.remove-investor{grid-area:close}#term_details,#fund_details{line-height:1.7;margin-bottom:2rem}.fund-placeholder{gap:1rem;padding:1rem;border-radius:.3rem;background-color:rgba(var(--foreground-color), 1);box-shadow:0 1rem 2rem -1rem rgba(0,0,0,.16)}.fund-placeholder .placeholder__block:first-of-type{width:min(24rem,100%)}.fund-placeholder:nth-of-type(2) .placeholder__block{-webkit-animation-delay:.3s;animation-delay:.3s}.fund-placeholder:nth-of-type(3) .placeholder__block{-webkit-animation-delay:.6s;animation-delay:.6s}.fund-placeholder:nth-of-type(4) .placeholder__block{-webkit-animation-delay:.8s;animation-delay:.8s}.placeholder__block{display:flex;border-radius:.3rem;min-width:9rem;padding:1.2rem 1rem;-webkit-animation:pulse alternate .6s ease infinite;animation:pulse alternate .6s ease infinite;background-color:rgba(var(--text-color), 0.1)}@-webkit-keyframes pulse{from{opacity:.4}to{opacity:1}}@keyframes pulse{from{opacity:.4}to{opacity:1}}.investors-list{display:grid;gap:1rem}.fund-investor{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:1rem;border-radius:.5rem;border:solid thin rgba(var(--text-color), 0.2)}.fund-investor>.grid:first-of-type{width:min(40ch,100%)}.fund-investor__redeem{background-color:var(--accent-color);border-radius:3rem;padding:.8rem 1.5rem;color:#fff;filter:saturate(0.8);align-self:flex-start}.fund-investor .tag{display:inline-flex;padding:.4rem .8rem;border-radius:.5rem;font-size:.8rem;font-weight:500;color:var(--danger-color);border:solid .1rem var(--danger-color)}.transaction-column{display:flex;flex-direction:column}.fund-block{border-radius:.5rem;padding:1rem;background-color:rgba(var(--foreground-color), 1);box-shadow:0 1rem 2rem -1rem rgba(0,0,0,.16)}.fund-block__details{display:flex;flex-wrap:wrap;gap:2rem 3rem}.start-date{display:flex;align-items:center;margin-bottom:2rem;background-color:rgba(var(--text-color), 0.06);padding:.8rem 1rem;border-radius:.5rem;width:-webkit-max-content;width:-moz-max-content;width:max-content}.start-date::before{content:"";display:inline-block;width:.5em;height:.5em;margin-right:.5rem;border-radius:50%;background-color:var(--accent-color)}.tapout-list{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;justify-content:flex-start}.tapout-list li{min-width:8rem}.fund-link{justify-self:flex-end}.user-action-result__icon{justify-self:center;height:4rem;width:4rem;border-radius:5rem;margin-bottom:2rem;-webkit-animation:popup 1s;animation:popup 1s}.user-action-result__icon.success{fill:rgba(var(--background-color), 1);padding:1rem;background-color:#0bbe56}.user-action-result__icon.failed{background-color:rgba(var(--text-color), 0.03);fill:var(--danger-color)}@-webkit-keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}@keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}@media only screen and (max-width: 640px){#main_header{grid-template-areas:". profile-button"}#main_header .dropdown{grid-area:profile-button}.investor-input{grid-template-columns:1fr auto;grid-template-areas:". close" ". close"}.fund-block{margin:0 -1rem}.fund-link{grid-column:2/3}}@media only screen and (min-width: 640px){sm-popup{--width: 26rem}.popup__header{padding:1.5rem 1.5rem 0 .75rem}#home_page{--side-padding: 8vw}#main_header{padding:2rem calc(5vw - .4rem);grid-template-columns:auto 1fr auto}#main_header::after{height:5rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.value{min-width:9rem}#current_price{justify-self:flex-end}.dropdown__panel{left:auto}.investor-input{grid-template-columns:1.5fr 1fr auto;grid-template-areas:". . close"}.fund-block{padding:3vw}.fund-investor{padding:1.5rem}.justify-self-end{justify-self:flex-end;text-align:right}}@media only screen and (min-width: 1280px){.page-layout{grid-template-columns:1fr 90vw 1fr}.multi-form{grid-template-columns:1fr 1fr}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}} \ No newline at end of file +*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(16px,1.2vmax,32px)}html,body{height:100%;scroll-behavior:smooth}body{--accent-color: #2353ff;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);color:rgba(var(--text-color), 1);background:rgba(var(--background-color), 1)}body[data-theme=dark]{--accent-color: #7e9aff;--text-color: 200, 200, 200;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}body[data-theme=dark] ::-webkit-calendar-picker-indicator{filter:invert(1)}.overpass{font-family:"Overpass",sans-serif;font-weight:700}h1,h2,h3,h4,h5,h6{font-family:"Overpass",sans-serif;font-weight:700}.h1{font-size:6rem}.h2{font-size:4rem}.h3{font-size:3rem;line-height:1.1}.h4{font-size:2rem}.h5{font-size:1.5rem}.h6{font-size:1.2rem}.body-1{font-size:1rem}.body-2{font-size:.85rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}p{font-size:.8;max-width:70ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}img{-o-object-fit:cover;object-fit:cover}a{color:var(--accent-color)}a:-webkit-any-link:focus-visible{outline:var(--accent-color) medium solid}a:-moz-any-link:focus-visible{outline:var(--accent-color) medium solid}a:any-link:focus-visible{outline:var(--accent-color) medium solid}button,.button{-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:rgba(0,0,0,0);overflow:hidden;color:inherit;-webkit-tap-highlight-color:rgba(0,0,0,0);align-items:center;font-size:.9rem;font-weight:500;white-space:nowrap;padding:.8rem;border-radius:.3rem;justify-content:center}button:focus-visible,.button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled),.button:not(:disabled){cursor:pointer}.button{background-color:rgba(var(--text-color), 0.02);border:solid thin rgba(var(--text-color), 0.06)}.button--primary{color:rgba(var(--background-color), 1) !important}.button--primary .icon{fill:rgba(var(--background-color), 1)}.button--danger{color:var(--danger-color)}.button--danger .icon{fill:var(--danger-color)}.button--primary{background-color:var(--accent-color)}.button--colored{color:var(--accent-color)}.button--colored .icon{fill:var(--accent-color)}.button--small{padding:.4rem .6rem}.button--outlined{border:solid rgba(var(--text-color), 0.3) .1rem;background-color:rgba(var(--foreground-color), 1)}.button--transparent{background-color:rgba(0,0,0,0)}button:disabled{cursor:not-allowed;filter:saturate(0)}.cta{text-transform:uppercase;font-weight:700;letter-spacing:.05em;padding:.8rem 1rem}a:-webkit-any-link{position:relative;display:inline-flex;align-items:center;background:none;cursor:pointer;outline:none;color:var(--accent-color);font-weight:500;font-size:.8rem;border-radius:.3rem;padding:.4rem .6rem;align-self:flex-start;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);border:1px solid var(--accent-color)}a:-moz-any-link{position:relative;display:inline-flex;align-items:center;background:none;cursor:pointer;outline:none;color:var(--accent-color);font-weight:500;font-size:.8rem;border-radius:.3rem;padding:.4rem .6rem;align-self:flex-start;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);border:1px solid var(--accent-color)}a:any-link{position:relative;display:inline-flex;align-items:center;background:none;cursor:pointer;outline:none;color:var(--accent-color);font-weight:500;font-size:.8rem;border-radius:.3rem;padding:.4rem .6rem;align-self:flex-start;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);border:1px solid var(--accent-color)}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}.icon{height:1.2rem;width:1.2rem;fill:rgba(var(--text-color), 1)}.multi-state-button{display:grid;text-align:center;align-items:center}.multi-state-button>*{grid-area:1/1/2/2}.multi-state-button button{z-index:1}.multi-state-button sm-spinner{justify-self:center}sm-spinner{--size: 1.5rem;--stroke-width: 0.1rem}.password-field label{display:flex;justify-content:center}.password-field label input:checked~.visible{display:none}.password-field label input:not(:checked)~.invisible{display:none}sm-input,sm-textarea{--border-radius: 0.5rem;--background: rgba(var(--text-color), 0.06)}ul{list-style:none}.accent-color{color:var(--accent-color)}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.grid{display:grid}.grid-3{grid-template-columns:repeat(auto-fill, minmax(8rem, 1fr))}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.pos-relative{position:relative}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-items-center{align-items:center}.align-end{align-content:flex-end}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-end{justify-content:end}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.margin-top-1-5{margin-top:1.5rem}.margin-bottom-0-5r{margin-bottom:.5rem}.margin-bottom-1r{margin-bottom:1rem}.margin-bottom-1-5r{margin-bottom:1.5rem}.margin-bottom-2r{margin-bottom:2rem}.margin-bottom-3r{margin-bottom:3rem}.margin-bottom-4r{margin-bottom:4rem}.margin-left-0-5{margin-left:.5rem}.margin-right-0-5{margin-right:.5rem}.color-0-9{color:rgba(var(--text-color), 0.9)}.color-0-8{color:rgba(var(--text-color), 0.8)}.color-0-7{color:rgba(var(--text-color), 0.7)}.weight-400{font-weight:400}.weight-500{font-weight:500}.weight-700{font-weight:700}.weight-900{font-weight:900}.hide{opacity:0;pointer-events:none}.hidden{display:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.popup__header{position:relative;display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr}.popup__header>*{grid-row:1}.popup__header h3,.popup__header h4{grid-column:1/-1;justify-self:center;align-self:center}.popup__header__close{grid-column:1}#loading_page,#error_page{position:relative;display:grid;height:100%;place-content:center;justify-items:center}.sad-face{height:6rem;margin:1rem;fill:rgba(var(--text-color), 1)}.sad-face .eyes{transform-origin:center;-webkit-animation:blink 1s infinite alternate;animation:blink 1s infinite alternate}.sad-face .face{-webkit-animation:nod 2s 1s;animation:nod 2s 1s}@-webkit-keyframes blink{0%{transform:scaleY(1)}80%{transform:scaleY(1)}100%{transform:scaleY(0)}}@keyframes blink{0%{transform:scaleY(1)}80%{transform:scaleY(1)}100%{transform:scaleY(0)}}@-webkit-keyframes nod{0%{transform:translateX(0)}20%{transform:translateX(-1.5rem)}30%{transform:translateX(1.5rem)}40%{transform:translateX(-1rem)}50%{transform:translateX(1rem)}60%{transform:translateX(-0.7rem)}70%{transform:translateX(0.7rem)}80%{transform:translateX(-0.5rem)}90%{transform:translateX(0.5rem)}100%{transform:translateX(0)}}@keyframes nod{0%{transform:translateX(0)}20%{transform:translateX(-1.5rem)}30%{transform:translateX(1.5rem)}40%{transform:translateX(-1rem)}50%{transform:translateX(1rem)}60%{transform:translateX(-0.7rem)}70%{transform:translateX(0.7rem)}80%{transform:translateX(-0.5rem)}90%{transform:translateX(0.5rem)}100%{transform:translateX(0)}}.page__footer{position:absolute;padding:3rem;bottom:0}#rm_logo{width:auto;height:2rem;fill:rgba(var(--text-color), 1)}#loader{display:flex;position:relative;width:4rem;height:8rem;fill:none;stroke-width:4;stroke-linecap:round;stroke:rgba(var(--text-color), 1)}#loader polyline:nth-of-type(2),#loader polyline:nth-of-type(3),#loader polyline:nth-of-type(4){stroke-dasharray:60;-webkit-animation:loading infinite 1s;animation:loading infinite 1s}@-webkit-keyframes loading{0%{stroke-dashoffset:-60}50%{stroke-dashoffset:0}100%{stroke-dashoffset:60}}@keyframes loading{0%{stroke-dashoffset:-60}50%{stroke-dashoffset:0}100%{stroke-dashoffset:60}}#main_header{position:relative;display:grid;gap:1.5rem;padding:1rem;align-items:center;background-color:#2353ff;color:#fff}#main_header__logo{fill:#fff;height:1.5rem;width:1.5rem}.header__company-name{font-size:1em;font-weight:500}#current_price{justify-self:flex-start}#usd-rate{display:flex;align-items:center}#usd-rate::before{content:"";width:1px;height:2rem;background-color:#fff;margin-right:1rem}.dropdown{display:flex;justify-content:flex-end;z-index:5}.dropdown__panel{position:absolute;display:grid;left:0;right:0;top:100%;margin:0 1rem;margin-top:.5rem;border-radius:.3rem;grid-template-columns:1fr;justify-content:flex-start;color:rgba(var(--text-color), 1);width:min(24rem,100vw - 2rem);background-color:rgba(var(--foreground-color), 1);box-shadow:0 2rem 2rem -0.5rem rgba(0,0,0,.16)}.dropdown__panel li{padding:1rem}#profile_button{align-items:center;justify-content:center;border:none;justify-self:flex-end;border-radius:50%;padding:.5rem;background-color:rgba(0,0,0,.16)}#profile_button .icon{fill:#fff}.page-layout{display:grid;grid-template-columns:1rem minmax(0, 1fr) 1rem}.page-layout>*{grid-column:2/3}#home_page{--side-padding: 1rem;display:flex;flex-direction:column;padding:0 max(1rem,var(--side-padding));padding-bottom:6rem}#homepage__hero-section{color:#fff;padding:2rem var(--side-padding) 6rem var(--side-padding);margin:0 calc(-1*max(1rem,var(--side-padding))) -1.8rem calc(-1*max(1rem,var(--side-padding)));background-image:url(../assets/bg-1.svg);background-color:#2353ff;background-size:cover}#homepage__hero-section p{color:rgba(255,255,255,.8)}#refresh_button{color:var(--accent-color);border:solid thin rgba(0,0,0,.2)}.fund-list__header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}#search_investor{position:-webkit-sticky;position:sticky;top:1rem;--background: rgba(var(--foreground-color), 1);border:solid thin rgba(var(--text-color), 0.2);color:rgba(var(--text-color), 1);--padding: 1rem;width:min(26rem,100%);align-self:center;margin-bottom:1.5rem;border-radius:.5rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.1);z-index:1}.label{font-weight:500;font-size:.85rem;margin-bottom:.3rem;color:rgba(var(--text-color), 0.8)}.value{font-weight:700;font-size:1rem;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;min-width:6rem}.warning-container{padding:1rem;margin-bottom:1rem;border-radius:.3rem;background-color:rgba(var(--foreground-color), 1);box-shadow:0 1rem 2rem -1rem rgba(0,0,0,.16)}#fund_list{display:flex;flex-direction:column;gap:1rem}#fund_list__empty-state{padding:4rem 0;border-radius:.3rem;place-content:center;margin-bottom:3rem;background-color:rgba(var(--foreground-color), 1);box-shadow:0 1rem 2rem -1rem rgba(0,0,0,.16)}#fund_list__empty-state .icon--big{height:6rem;width:6rem;justify-self:center}form{padding:1rem;border-radius:.3rem;width:min(32rem,100%);margin-bottom:3rem;background:rgba(var(--foreground-color), 1)}form input{display:inline-flex;color:inherit;font-family:inherit;padding:.6rem;border:none;box-shadow:0 0 0 1px rgba(var(--text-color), 0.3);background-color:rgba(var(--text-color), 0.06);flex:1}form select option{color:inherit;background-color:rgba(var(--text-color), 0.1)}.investor-input{gap:.5rem}.remove-investor{grid-area:close}#term_details,#fund_details{line-height:1.7;margin-bottom:2rem}.investors-list{display:grid;gap:1rem}.fund-investor{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:1rem;border-radius:.5rem;border:solid thin rgba(var(--text-color), 0.2)}.fund-investor>.grid:first-of-type{width:min(40ch,100%)}.fund-investor__withdraw{background-color:var(--accent-color);border-radius:3rem;padding:.8rem 1.5rem;color:rgba(var(--background-color), 1);align-self:flex-start}.fund-investor .tag{display:inline-flex;padding:.4rem .8rem;border-radius:.5rem;font-size:.8rem;font-weight:500;color:var(--danger-color);border:solid .1rem var(--danger-color)}.transaction-column{display:flex;flex-direction:column}.fund-block{border-radius:.5rem;padding:1rem;background-color:rgba(var(--foreground-color), 1);box-shadow:0 1rem 2rem -1rem rgba(0,0,0,.16)}.fund-block__details{display:flex;flex-wrap:wrap;gap:2rem 3rem}.start-date{display:flex;align-items:center;margin-bottom:2rem;background-color:rgba(var(--text-color), 0.06);padding:.8rem 1rem;border-radius:.5rem;width:-webkit-max-content;width:-moz-max-content;width:max-content}.start-date::before{content:"";display:inline-block;width:.5em;height:.5em;margin-right:.5rem;border-radius:50%;background-color:var(--accent-color)}.tapout-list{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;justify-content:flex-start}.tapout-list li{min-width:8rem}.fund-link{justify-self:flex-end}.user-action-result__icon{justify-self:center;height:4rem;width:4rem;border-radius:5rem;margin-bottom:2rem;-webkit-animation:popup 1s;animation:popup 1s}.user-action-result__icon.success{fill:rgba(var(--background-color), 1);padding:1rem;background-color:#0bbe56}.user-action-result__icon.failed{background-color:rgba(var(--text-color), 0.03);fill:var(--danger-color)}@-webkit-keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}@keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}@media only screen and (max-width: 640px){#main_header{grid-template-areas:". profile-button"}#main_header .dropdown{grid-area:profile-button}.investor-input{grid-template-columns:1fr auto;grid-template-areas:". close" ". close"}.fund-block{margin:0 -1rem}.fund-link{grid-column:2/3}}@media only screen and (min-width: 640px){sm-popup{--width: 26rem}.popup__header{padding:1.5rem 1.5rem 0 .75rem}#home_page{--side-padding: 8vw}#main_header{padding:2rem calc(5vw - .4rem);grid-template-columns:auto 1fr auto}#main_header::after{height:5rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.value{min-width:9rem}#current_price{justify-self:flex-end}.dropdown__panel{left:auto}.investor-input{grid-template-columns:1.5fr 1fr auto;grid-template-areas:". . close"}.fund-block{padding:3vw}.fund-investor{padding:1.5rem}.justify-self-end{justify-self:flex-end;text-align:right}}@media only screen and (min-width: 1280px){.page-layout{grid-template-columns:1fr 90vw 1fr}.multi-form{grid-template-columns:1fr 1fr}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index b06c978..7a73fad 100644 --- a/css/main.scss +++ b/css/main.scss @@ -5,7 +5,7 @@ font-family: "Roboto", sans-serif; } :root { - font-size: clamp(16px, 1.2vmax, 20px); + font-size: clamp(16px, 1.2vmax, 32px); } html, body { @@ -14,7 +14,6 @@ body { } body { --accent-color: #2353ff; - --light-shade: rgba(var(--text-color), 0.06); --text-color: 20, 20, 20; --foreground-color: 252, 253, 255; --background-color: 241, 243, 248; @@ -25,7 +24,7 @@ body { background: rgba(var(--background-color), 1); } body[data-theme="dark"] { - --accent-color: #2353ff; + --accent-color: #7e9aff; --text-color: 200, 200, 200; --foreground-color: 27, 28, 29; --background-color: 21, 22, 22; @@ -35,9 +34,6 @@ body[data-theme="dark"] { ::-webkit-calendar-picker-indicator { filter: invert(1); } - a:any-link { - filter: saturate(0.5) brightness(2); - } } .overpass { font-family: "Overpass", sans-serif; @@ -61,7 +57,6 @@ h6 { .h3 { font-size: 3rem; line-height: 1.1; - letter-spacing: -0.02em; } .h4 { font-size: 2rem; @@ -78,11 +73,6 @@ h6 { .body-2 { font-size: 0.85rem; } - -.full-bleed { - grid-column: 1/4 !important; -} - .uppercase { text-transform: uppercase; } @@ -106,7 +96,7 @@ a { } a:any-link:focus-visible { - outline: rgba(var(--text-color), 1) 0.1rem solid; + outline: var(--accent-color) medium solid; } button, @@ -176,7 +166,8 @@ button, } } button:disabled { - opacity: 0.5; + cursor: not-allowed; + filter: saturate(0); } .cta { text-transform: uppercase; @@ -247,9 +238,6 @@ sm-textarea { --border-radius: 0.5rem; --background: rgba(var(--text-color), 0.06); } -sm-button { - --border-radius: 0.5rem; -} ul { list-style: none; } @@ -565,7 +553,7 @@ ul { gap: 1.5rem; padding: 1rem; align-items: center; - background-color: var(--accent-color); + background-color: #2353ff; color: white; } #main_header__logo { @@ -630,11 +618,6 @@ ul { } } -#theme_switcher { - overflow: hidden; - width: 100%; -} - .page-layout { display: grid; grid-template-columns: 1rem minmax(0, 1fr) 1rem; @@ -652,10 +635,10 @@ ul { } #homepage__hero-section { color: white; - padding: 2rem var(--side-padding) 9rem var(--side-padding); - margin: 0 calc(-1 * max(1rem, var(--side-padding))) -5.5rem calc(-1 * max(1rem, var(--side-padding))); + padding: 2rem var(--side-padding) 6rem var(--side-padding); + margin: 0 calc(-1 * max(1rem, var(--side-padding))) -1.8rem calc(-1 * max(1rem, var(--side-padding))); background-image: url(../assets/bg-1.svg); - background-color: var(--accent-color); + background-color: #2353ff; background-size: cover; p { color: rgba($color: #fff, $alpha: 0.8); @@ -663,15 +646,12 @@ ul { } #refresh_button { color: var(--accent-color); - background-color: white; border: solid thin rgba(0, 0, 0, 0.2); } .fund-list__header { display: flex; align-items: center; - color: white; - align-items: center; gap: 1rem; margin-bottom: 1rem; } @@ -772,42 +752,6 @@ form { line-height: 1.7; margin-bottom: 2rem; } -.fund-placeholder { - gap: 1rem; - padding: 1rem; - border-radius: 0.3rem; - background-color: rgba(var(--foreground-color), 1); - box-shadow: 0 1rem 2rem -1rem rgba($color: #000000, $alpha: 0.16); - .placeholder__block:first-of-type { - width: min(24rem, 100%); - } - &:nth-of-type(2) .placeholder__block { - animation-delay: 0.3s; - } - &:nth-of-type(3) .placeholder__block { - animation-delay: 0.6s; - } - &:nth-of-type(4) .placeholder__block { - animation-delay: 0.8s; - } -} -.placeholder__block { - display: flex; - border-radius: 0.3rem; - min-width: 9rem; - padding: 1.2rem 1rem; - animation: pulse alternate 0.6s ease infinite; - background-color: rgba(var(--text-color), 0.1); -} - -@keyframes pulse { - from { - opacity: 0.4; - } - to { - opacity: 1; - } -} .investors-list { display: grid; gap: 1rem; @@ -824,12 +768,11 @@ form { & > .grid:first-of-type { width: min(40ch, 100%); } - &__redeem { + &__withdraw { background-color: var(--accent-color); border-radius: 3rem; padding: 0.8rem 1.5rem; - color: white; - filter: saturate(0.8); + color: rgba(var(--background-color), 1); align-self: flex-start; } .tag { diff --git a/index.html b/index.html index 2df14bf..a72c0ce 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,7 @@ /* Constants for FLO blockchain operations !!Make sure to add this at begining!! */ const floGlobals = { blockchain: "FLO", - adminID: "FT9qkvuWXWBDRhHd42tDr5nMYFSx7bEhV7", + adminID: "FFXy5pJnfzu2fCDLhpUremyXQjGtFpgCDN", application: "BobsFund" } @@ -59,7 +59,7 @@ -

RanchiMall

+

RanchiMall

- +

Withdraw fund

-
-
+
+
-
-
+
-
@@ -379,7 +377,7 @@ d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />

Failed

-

+

@@ -554,10 +552,10 @@ }) document.addEventListener('popupclosed', e => { switch (e.detail.popup.id) { - case 'redeem_popup': - showChildElement(getRef('redeem_process'), 0); - buttonLoader('redeem_private_key_button', false) - getRef('redeem_private_key_button').disabled = true; + case 'withdraw_popup': + showChildElement(getRef('withdraw_process'), 0); + buttonLoader('withdraw_private_key_button', false) + getRef('withdraw_private_key_button').disabled = true; break; } if (popupStack.items.length === 0) { @@ -748,7 +746,7 @@ ${formatAmount(netValue[preferredCurrency], preferredCurrency)}
- + ` }, @@ -816,7 +814,7 @@ ${formatAmount(netValue[preferredCurrency], preferredCurrency)} - + ` }, @@ -1303,32 +1301,31 @@ } }) getRef('fund_list').addEventListener('click', e => { - if (e.target.closest('.fund-investor__redeem')) { - const button = e.target.closest('.fund-investor__redeem') - floGlobals.redeemId = button.closest('.fund-investor').id.split('_') - const [fundId, investorId] = floGlobals.redeemId - renderElem(getRef('redeem__id'), html`
Investor address
${investorId}`) - openPopup('redeem_popup') + if (e.target.closest('.fund-investor__withdraw')) { + floGlobals.withdrawId = e.target.closest('.fund-investor').id.split('_') + const [fundId, investorId] = floGlobals.withdrawId + renderElem(getRef('withdraw__id'), html`
Investor address
${investorId}`) + openPopup('withdraw_popup') } }) - getRef('redeem_private_key_button').addEventListener('click', e => { - buttonLoader('redeem_private_key_button', true) - const privKey = getRef('redeem_private_key').value - const [fundId, investorId] = floGlobals.redeemId + getRef('withdraw_private_key_button').addEventListener('click', e => { + buttonLoader('withdraw_private_key_button', true) + const privKey = getRef('withdraw_private_key').value + const [fundId, investorId] = floGlobals.withdrawId floExchangeAPI.closeBobsFundInvestment(fundId, investorId, privKey).then(result => { console.log(result) - showChildElement(getRef('redeem_process'), 1, { entry: slideInLeft, exit: slideOutLeft }); - const redeemButton = document.getElementById(floGlobals.redeemId.join('_'))?.querySelector('.fund-investor__redeem') - if (redeemButton) { - redeemButton.textContent = 'Redeemed' - redeemButton.disabled = true + showChildElement(getRef('withdraw_process'), 1, { entry: slideInLeft, exit: slideOutLeft }); + const withdrawButton = document.getElementById(floGlobals.withdrawId.join('_'))?.querySelector('.fund-investor__withdraw') + if (withdrawButton) { + withdrawButton.textContent = 'Withdrawn' + withdrawButton.disabled = true } }).catch(error => { - getRef('redeem_failed_message').textContent = error.message - showChildElement(getRef('redeem_process'), 2, { entry: slideInLeft, exit: slideOutLeft }); + getRef('withdraw_failed_message').textContent = error.message + showChildElement(getRef('withdraw_process'), 2, { entry: slideInLeft, exit: slideOutLeft }); console.error(error) }).finally(() => { - buttonLoader('redeem_private_key_button', false) + buttonLoader('withdraw_private_key_button', false) }) }) diff --git a/scripts/floExchangeAPI.js b/scripts/floExchangeAPI.js index 1880c8b..ba5ebe5 100644 --- a/scripts/floExchangeAPI.js +++ b/scripts/floExchangeAPI.js @@ -4,7 +4,7 @@ const exchangeAPI = EXPORTS; const DEFAULT = { - marketID: floGlobals.marketID || "FKAEdnPfjXLHSYwrXQu377ugN4tXU7VGdf", + marketID: floGlobals.marketID || "FMxYC7gYZhouzqtHZukGnPiQ8nvG4CMzXM", marketApp: "exchange" }