update

src/features/trackSomething/components/ActivityHistory.scss

@@ -1,3 +1,4 @@
+@import '@/utils/common.scss';
 .modalTitle{
     display: flex;
     font-size: 36px;
@@ -15,7 +16,7 @@
     flex-direction: row;
     align-items: center;
     background-color: #1C1C1C;
-    border-radius: 36px;
+    border-radius: $boxBorderRadius;
     padding-left: 40px;
     padding-right: 40px;
     margin-top: 16px;

src/features/trackSomething/components/MetricHistory.scss

@@ -1,3 +1,5 @@
+@import '@/utils/common.scss';
+
 .year{
     margin-left: 46px;
     margin-top: 16px;
@@ -35,7 +37,7 @@
     flex-direction: row;
     align-items: center;
     background-color: #1C1C1C;
-    border-radius: 36px;
+    border-radius: $boxBorderRadius;
     padding-left: 40px;
     padding-right: 40px;
     margin-top: 16px;

src/features/trackSomething/components/MetricItem.scss

@@ -1,8 +1,10 @@
+@import '@/utils/common.scss';
+
 .metric_bg {
     width: 320px;
     display: flex;
     flex-direction: column;
-    border-radius: 36px;
+    border-radius: $boxBorderRadius;
     padding-left: 36px;
     padding-right: 36px;
     padding-top: 24px;

src/utils/common.scss

@@ -11,7 +11,11 @@ $ringColor: #1c1c1c;
 $blackColor: #000000;
 $whiteColor: #ffffff;
 
-$boxBorderRadius:48px;
+$boxBorderRadius:36px;
+$boxPadding:40px;
+
+$historyItemMarginBottom:16px;
+
 
 
 .fast_sleep_text {