Skip to content
This repository has been archived by the owner on Oct 18, 2023. It is now read-only.

New Worker Panel Styles #80

Merged
merged 10 commits into from
May 5, 2021
Merged

New Worker Panel Styles #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
b35a887
Drawing attention to the current period
KPrasch May 4, 2021
e4cee84
Code organizations for chart componets
KPrasch May 5, 2021
36d6a6c
Restore chart stats to three values.
KPrasch May 5, 2021
c13d1e8
Extricate management panels into components
KPrasch May 5, 2021
2ff58a6
Disable current period panel for now
KPrasch May 5, 2021
2804a6e
Extricates main staker control panel to component; Code Reorg.
KPrasch May 5, 2021
3734077
Code optimization and componentize chart elements
KPrasch May 5, 2021
2d35521
Current period management panel
KPrasch May 5, 2021
cc93805
Tooltip and subatske alignment adjustments
KPrasch May 5, 2021
fb82f18
Styles new worker flow closer to the spec
KPrasch May 5, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/react-app/src/assets/icons/reset-x.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
115 changes: 112 additions & 3 deletions packages/react-app/src/assets/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,107 @@ hr {
padding: 11px;
}

.circleQ {
padding-left: 8px;
margin-top: -1px;
}

#remaining-time {
margin-left: 2px;
}

/*New Worker Selection*/

#stake-method-selector {
display: flex;
justify-content: space-around;
flex-grow: 1;
border-radius: 24px;
}

#clear-selection {
height: 12px;
}

.new-stake-method {
border-radius: 16px;
width: 33%;
}

/*.new-stake-method:hover:not(.active) {*/
/* border: 1px solid #1E65F3;*/
/*}*/

.collect-worker {
max-width: 608px;
display: flex;
flex-direction: column;
padding-top: 1em;
border-radius: 6px;
background-color: #ffffff;
}

.collect-worker input {
background-color: #f3f4f4;
outline: 4px solid #f3f4f4;
box-shadow: none;
border-radius: 6px;
border: none;
margin-left: 6px;
width: 100% !important;
padding-top: 17px;
padding-bottom: 17px;
padding-left: 24px;
padding-right: 25px;
}

#worker-runway {
padding: 24px;
padding-top: 6px;
padding-left: 2rem;
padding-right: 3rem;
}

.collect-worker.valid {
background-color: #e9edf0;
}

.form-control.valid:focus {
background-color: transparent;
}

.collect-worker input.valid{
outline: none;
border: none;
background-color: transparent;
}

.form-control:focus {
color: #495057;
background-color: #f3f4f4;
outline: 4px solid #f3f4f4;
box-shadow: none;
border: 2px solid #1E65F3;
border-radius: 6px;
}

.collect-worker .form-group, .form-control {
width: 100%;
background-color: #e9edf0;
border-radius: 6px;
padding: 24px;
margin-bottom: 0;
}

.collect-worker button {
margin-left: -5em;
margin-top: -4px;
}

.collect-worker-label {
color: #828A9C;
}

.reward-button {
min-height: 64px;
display: flex;
Expand All @@ -91,7 +192,7 @@ hr {
background-color: #F3F4F4;
border-bottom: 1px solid #E0E4E8;
border-radius: 0;
align-content: center;
align-items: center;
padding-left: 24px;
padding-right: 24px;
display: flex;
Expand Down Expand Up @@ -150,7 +251,13 @@ hr {


#substake-control-buttons {
margin-bottom: 1.5rem;
margin-bottom: 0.8rem;
}

#substake-control-buttons button {
justify-content: center;
display: flex;
align-content: center;
}

#substake-list-header {
Expand Down Expand Up @@ -217,10 +324,12 @@ table.nc-table2 th:nth-child(1), table.nc-table2 td:nth-child(1) {
}

/*Event History */

#historyLabel {
margin-top: 6rem;
margin-bottom: 1vh;
margin-bottom: 3em;
font-weight: 600;
margin-left: -2em;
}

#eventHistory > nav {
Expand Down
3 changes: 0 additions & 3 deletions packages/react-app/src/components/actions/createStake.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,6 @@ export const CreateStake = (props) => {
const [duration, setDuration] = useState(props.duration || 30)
const [roi, setRoi] = useState({apr: 0, net: 0})




const [addingsubstake, setAddingSubstake] = useState(false)

useEffect(() => {
Expand Down
Loading