bec50829c1
about to test something generate programatically beginning of the frontend stripe integration page seems to be working add user put functionality behind conditional tag connect frontend working well adding environment variables to save success and failure url bugfix bugfix final clean up adding credit card page seems to be coming along calls successfully coming from the frontend fixing up frontend cleaning up frontend coming along client secret working basic frontend in place adding tip page adding more to the tip frontend frontend almost done tabs coming along one last thing to do for frontend adding explainer text as custom function putting finishing touches on tabs support tabs working well disable fiat toggle when card not connected fix frontend gui bug bugfix and pull out label function fix symbol for tip gui modal when card is not yet saved fix fiat disabled bug knowing whether card is added programatically sending tip with frontend tip functionality working show unpaid balance add frontend for card add section update frontend update frontend bugfix change to use react instead of css update how stripe is instantiated fix bug use customer setup coming along working but needs optimization persist if card is saved adding anonymous tip functionality fix nan bug build stripe endpoints programatically show for all users for time being allow the stripe key to automatically switch to live environment bugfix bugfix fix jslint fix channel page support button better docs show customer transactions on frontend basic table in place various page updates per jeremys notes showing card details nicer tip history table add better prompt to add card on file viewer page some linting time put connect account behind fiat enabled no persist fiat mode wallet calls tip stuff
331 lines
5.9 KiB
SCSS
331 lines
5.9 KiB
SCSS
.date-header {
|
|
width: 30%;
|
|
}
|
|
|
|
.grey-text {
|
|
color: rgb(156, 163, 175)
|
|
}
|
|
|
|
/* Layout */
|
|
.sr-root {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
max-width: 980px;
|
|
padding: 48px;
|
|
align-content: center;
|
|
justify-content: center;
|
|
height: 400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.sr-picker {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 25px;
|
|
}
|
|
.sr-picker button {
|
|
background: none !important;
|
|
border: none;
|
|
padding: 0 !important;
|
|
/*optional*/
|
|
font-family: arial, sans-serif;
|
|
/*input has OS specific font-family*/
|
|
color: var(--accent-color);
|
|
cursor: pointer;
|
|
width: 75px;
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
}
|
|
.sr-picker button:hover,
|
|
.sr-picker button:focus,
|
|
.sr-picker button.selected {
|
|
outline: none;
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
}
|
|
.sr-picker button:hover,
|
|
.sr-picker button:focus {
|
|
border-bottom: 2px solid var(--secondary-color);
|
|
}
|
|
.sr-picker button.selected {
|
|
border-bottom: 2px solid var(--accent-color);
|
|
}
|
|
.sr-field-error {
|
|
color: var(--font-color);
|
|
text-align: left;
|
|
font-size: 13px;
|
|
line-height: 17px;
|
|
margin-top: 12px;
|
|
max-width: 269px;
|
|
}
|
|
|
|
/* Inputs */
|
|
.sr-input {
|
|
border: 1px solid var(--gray-border);
|
|
border-radius: var(--radius);
|
|
padding: 5px 12px;
|
|
height: 44px;
|
|
width: 100%;
|
|
transition: box-shadow 0.2s ease;
|
|
background: white;
|
|
-moz-appearance: none;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width:284px;
|
|
}
|
|
.sr-input:focus {
|
|
box-shadow: 0 0 0 1px rgba(50, 151, 211, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.07),
|
|
0 0 0 4px rgba(50, 151, 211, 0.3);
|
|
outline: none;
|
|
z-index: 9;
|
|
}
|
|
.sr-input::placeholder {
|
|
color: var(--gray-light);
|
|
}
|
|
.sr-result {
|
|
height: 44px;
|
|
-webkit-transition: height 1s ease;
|
|
-moz-transition: height 1s ease;
|
|
-o-transition: height 1s ease;
|
|
transition: height 1s ease;
|
|
color: var(--font-color);
|
|
overflow: auto;
|
|
}
|
|
.sr-result code {
|
|
overflow: scroll;
|
|
}
|
|
.sr-result.expand {
|
|
height: 350px;
|
|
}
|
|
|
|
.sr-combo-inputs-row {
|
|
box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
|
|
0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
|
|
border-radius: 7px;
|
|
}
|
|
|
|
/* Form */
|
|
.sr-form-row {
|
|
margin: 16px 0;
|
|
}
|
|
//label {
|
|
// font-size: 13px;
|
|
// font-weight: 500;
|
|
// margin-bottom: 8px;
|
|
// display: inline-block;
|
|
//}
|
|
|
|
/* Buttons and links */
|
|
button.linkButton {
|
|
background-color: rgb(30, 166, 114);
|
|
border-radius: 6px;
|
|
color: white;
|
|
border: 0;
|
|
padding: 12px 16px;
|
|
margin-top: 16px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
display: block;
|
|
box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
|
|
width: 100%;
|
|
max-width:280px;
|
|
}
|
|
button.linkButton:hover {
|
|
filter: contrast(115%);
|
|
}
|
|
button.linkButton:active {
|
|
transform: translateY(0px) scale(0.98);
|
|
filter: brightness(0.9);
|
|
}
|
|
button.linkButton:disabled {
|
|
opacity: 0.5;
|
|
cursor: none;
|
|
}
|
|
|
|
//a {
|
|
// color: var(--link-color);
|
|
// text-decoration: none;
|
|
// transition: all 0.2s ease;
|
|
//}
|
|
//
|
|
//a:hover {
|
|
// filter: brightness(0.8);
|
|
//}
|
|
//
|
|
//a:active {
|
|
// filter: brightness(0.5);
|
|
//}
|
|
|
|
/* Code block */
|
|
code,
|
|
pre {
|
|
font-family: "SF Mono", "IBM Plex Mono", "Menlo", monospace;
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Stripe Element placeholder */
|
|
.sr-card-element {
|
|
padding-top: 12px;
|
|
}
|
|
|
|
/* Responsiveness */
|
|
@media (max-width: 720px) {
|
|
.sr-root {
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
padding: 48px 20px;
|
|
min-width: 320px;
|
|
}
|
|
|
|
.sr-header__logo {
|
|
background-position: center;
|
|
}
|
|
|
|
.sr-payment-summary {
|
|
text-align: center;
|
|
}
|
|
|
|
.sr-payment-form {
|
|
padding: 10px 34px;
|
|
}
|
|
|
|
.sr-content {
|
|
display: none;
|
|
}
|
|
|
|
.sr-main {
|
|
width: 100%;
|
|
height: 305px;
|
|
box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
|
|
0px 2px 5px 0px rgba(50, 50, 93, 0.1),
|
|
0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
|
|
border-radius: 6px;
|
|
padding: 10px 20px !important;
|
|
}
|
|
}
|
|
|
|
/* todo: spinner/processing state, errors, animations */
|
|
|
|
.spinner,
|
|
.spinner:before,
|
|
.spinner:after {
|
|
border-radius: 50%;
|
|
}
|
|
.spinner {
|
|
color: #ffffff;
|
|
font-size: 22px;
|
|
text-indent: -99999px;
|
|
margin: 0px auto;
|
|
position: relative;
|
|
width: 20px;
|
|
height: 20px;
|
|
box-shadow: inset 0 0 0 2px;
|
|
-webkit-transform: translateZ(0);
|
|
-ms-transform: translateZ(0);
|
|
transform: translateZ(0);
|
|
}
|
|
.spinner:before,
|
|
.spinner:after {
|
|
position: absolute;
|
|
content: "";
|
|
}
|
|
.spinner:before {
|
|
width: 10.4px;
|
|
height: 20.4px;
|
|
background: var(--accent-color);
|
|
border-radius: 20.4px 0 0 20.4px;
|
|
top: -0.2px;
|
|
left: -0.2px;
|
|
-webkit-transform-origin: 10.4px 10.2px;
|
|
transform-origin: 10.4px 10.2px;
|
|
-webkit-animation: loading 2s infinite ease 1.5s;
|
|
animation: loading 2s infinite ease 1.5s;
|
|
}
|
|
.spinner:after {
|
|
width: 10.4px;
|
|
height: 10.2px;
|
|
background: var(--accent-color);
|
|
border-radius: 0 10.2px 10.2px 0;
|
|
top: -0.1px;
|
|
left: 10.2px;
|
|
-webkit-transform-origin: 0px 10.2px;
|
|
transform-origin: 0px 10.2px;
|
|
-webkit-animation: loading 2s infinite ease;
|
|
animation: loading 2s infinite ease;
|
|
}
|
|
|
|
@-webkit-keyframes loading {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes loading {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* Animated form */
|
|
|
|
.sr-root {
|
|
animation: 0.4s form-in;
|
|
animation-fill-mode: both;
|
|
animation-timing-function: ease;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
@keyframes field-in {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(8px) scale(0.95);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0px) scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes form-in {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.98);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.sr-payment-form {
|
|
padding: 10px 35px;
|
|
padding-bottom:28px;
|
|
}
|
|
|
|
.payment-details {
|
|
font-size:16px;
|
|
margin-bottom:4px;
|
|
}
|
|
|
|
.sr-field-error {
|
|
font-size:15px;
|
|
}
|
|
|
|
//.successCard, .toConfirmCard {
|
|
// max-width: 94%
|
|
//}
|
|
|