/ src / components / Wallet / tokenlist.module.scss
tokenlist.module.scss
  1  $primaryColor: #012060;
  2  
  3  .TokenTableRoot {
  4    position: relative;
  5    overflow: scroll;
  6    width: 80%;
  7    border-radius: 12px;
  8    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  9    transition: box-shadow 0.3s ease;
 10  }
 11  
 12  .TokenTableTarget {
 13    display: flex;
 14    align-items: center;
 15    justify-content: center;
 16    height: 100%;
 17    padding: 0.5rem 1rem;
 18    color: $primaryColor;
 19    text-decoration: none;
 20    transition: color 0.3s ease;
 21    font-size: 22px;
 22  
 23    &:hover {
 24      color: lighten($primaryColor, 20%);
 25    }
 26  }
 27  
 28  .TokenTableContent {
 29    padding: 0.5rem;
 30  }
 31  
 32  .TokenTableRootInner {
 33    width: 100%;
 34    margin-top: 0;
 35    display: flex;
 36    justify-content: center;
 37  }
 38  
 39  .TokenTableHeader {
 40    background-color: transparent;
 41    padding: 0.5rem 2rem;
 42  }
 43  
 44  .TokenTableRow {
 45    background-color: transparent;
 46    border-radius: 12px;
 47    transition: background-color 0.3s ease, transform 0.3s ease;
 48  
 49    &:hover {
 50      background-color: rgba(240, 240, 240, 0.9);
 51      transform: scale(1.02);
 52      border-radius: 12px;
 53    }
 54  }
 55  
 56  .SelectedRow {
 57    background-color: #e0e0e0;
 58    border-radius: 12px;
 59    transform: scale(1.02);
 60    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 61  }
 62  
 63  .PendingRow {
 64    background-color: #ccd4db;
 65    border-radius: 12px;
 66    transition: background-color 0.3s ease, transform 0.3s ease;
 67  
 68    &:hover {
 69      background-color: rgba(240, 240, 240, 0.9);
 70      transform: scale(1.02);
 71      border-radius: 12px;
 72    }
 73  }
 74  
 75  .AcceptButton {
 76    background-color: #4caf50;
 77    color: white;
 78    font-size: 14px;
 79    border: none;
 80    padding: 8px 16px;
 81    border-radius: 8px;
 82    cursor: pointer;
 83    transition: background-color 0.3s ease;
 84  
 85    &:hover {
 86      background-color: darken(#4caf50, 10%);
 87    }
 88  }
 89  
 90  .DeclineButton {
 91    background-color: #e53935;
 92    color: white;
 93    font-size: 14px;
 94    border: none;
 95    padding: 8px 16px;
 96    border-radius: 8px;
 97    cursor: pointer;
 98    transition: background-color 0.3s ease;
 99  
100    &:hover {
101      background-color: darken(#e53935, 10%);
102    }
103  }
104  
105  .TokenTableHeaderCell {
106    padding: 0.5rem 1.8rem;
107    font-size: 14px;
108    box-sizing: border-box;
109    overflow: hidden;
110    text-overflow: ellipsis;
111    white-space: nowrap;
112    align-items: center;
113  }
114  
115  .TokenTableCell {
116    padding: 1rem 2rem;
117    border: none;
118    font-size: 14px;
119    box-sizing: border-box;
120    overflow: hidden;
121    text-overflow: ellipsis;
122    white-space: nowrap;
123  }
124  
125  .TokenTableCell img {
126    margin-right: 8px;
127  }
128  
129  .TokenTableBody {
130    padding: 0.5rem 1.8rem;
131    font-size: 14px;
132    box-sizing: border-box;
133    overflow: hidden;
134    text-overflow: ellipsis;
135    white-space: nowrap;
136  }
137  
138  .TokenTableCell .TokenIcon {
139    margin-right: 8px;
140    display: inline-block;
141    vertical-align: middle;
142  }
143  
144  .TokenTableHeaderCell img {
145    margin-right: 8px;
146  }
147  
148  .AddButtonContainer {
149    display: flex;
150    justify-content: center;
151    align-items: center;
152    height: 100%;
153  }
154  
155  .CenteredButton {
156    display: flex;
157    justify-content: center;
158    align-items: center;
159    width: 10%;
160  }
161  
162  .AddButton {
163    background-color: #012060;
164    color: white;
165    font-size: 18px;
166    margin-bottom: 25px;
167    border: none;
168    padding: 10px 20px;
169    border-radius: 8px;
170    cursor: pointer;
171    transition: background-color 0.3s ease;
172  
173    &:hover {
174      background-color: darken(#012060, 10%);
175    }
176  }