لول آپ کردن با برخی استایل ها

دقت نموده اید که برخی کلاس های سفارشی طراحی اپلیکیشن را رایا پارس به اجزایی که پیش از این ساخت‌و‌ساز کرده ایم اضافه میکنیم. ادامه میدهیم و بعضی ضوابط پیاده سازی مرتبط با کلاس هایی که در پوشه src/App.scss وجود داراست تعریف‌و‌تمجید میکنیم. فولدر App.scss  می بایست مانند قطعه کد ذیل باشد:

/* Declare some variables */
$base-color: #ced4da;
$light-background: lighten(desaturate($base-color, 50%), 12.5%);

.current-page {
font-size: 1.5rem;
vertical-align: middle;
}

.country-card-container {
height: 60px;
cursor: pointer;
position: relative;
overflow: hidden;
}

.country-name {
font-size: 0.9rem;
}

.country-region {
font-size: 0.7rem;
}

.current-page,
.country-name,
.country-region {
line-height: 1;
}

// Override some Bootstrap pagination styles
ul.pagination {
margin-top: 0;
margin-bottom: 0;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);

li.page-item.active {
a.page-link {
color: saturate(darken($base-color, 50%), 5%) !important;
background-color: saturate(lighten($base-color, 7.5%), 2.5%) !important;
border-color: $base-color !important;
}
}

a.page-link {
padding: 0.75rem 1rem;
min-width: 3.5rem;
text-align: center;
box-shadow: none !important;
border-color: $base-color !important;
color: saturate(darken($base-color, 30%), 10%);
font-weight: 900;
font-size: 1rem;

&:hover {
background-color: $light-background;
}
}
}
بعداز افزودن استایل ها حال اپ می بایست مانند اسکرین شات پایین باشد: