Browse Source

refactor: Consistent border-radius

Owen Diffey 3 years ago
parent
commit
dafaaa6083
33 changed files with 97 additions and 96 deletions
  1. 17 17
      frontend/src/App.vue
  2. 1 1
      frontend/src/components/ActivityItem.vue
  3. 9 9
      frontend/src/components/AdvancedTable.vue
  4. 1 1
      frontend/src/components/AutoSuggest.vue
  5. 1 1
      frontend/src/components/FloatingBox.vue
  6. 2 2
      frontend/src/components/Modal.vue
  7. 1 1
      frontend/src/components/PunishmentItem.vue
  8. 1 1
      frontend/src/components/Queue.vue
  9. 1 1
      frontend/src/components/modals/EditNews.vue
  10. 4 4
      frontend/src/components/modals/EditPlaylist/index.vue
  11. 4 4
      frontend/src/components/modals/EditSong/Tabs/Discogs.vue
  12. 3 3
      frontend/src/components/modals/EditSong/Tabs/Reports.vue
  13. 5 5
      frontend/src/components/modals/EditSong/index.vue
  14. 3 3
      frontend/src/components/modals/EditSongs.vue
  15. 11 11
      frontend/src/components/modals/ImportAlbum.vue
  16. 1 1
      frontend/src/components/modals/ManageStation/Tabs/Settings.vue
  17. 1 1
      frontend/src/components/modals/ManageStation/Tabs/Songs.vue
  18. 4 4
      frontend/src/components/modals/ManageStation/index.vue
  19. 2 2
      frontend/src/components/modals/Report.vue
  20. 1 1
      frontend/src/components/modals/RequestSong.vue
  21. 2 2
      frontend/src/components/modals/ViewReport.vue
  22. 1 1
      frontend/src/pages/About.vue
  23. 1 1
      frontend/src/pages/Admin/tabs/Punishments.vue
  24. 1 1
      frontend/src/pages/Admin/tabs/Statistics.vue
  25. 2 2
      frontend/src/pages/Home.vue
  26. 3 3
      frontend/src/pages/Profile/index.vue
  27. 2 2
      frontend/src/pages/Settings/index.vue
  28. 2 2
      frontend/src/pages/Station/Sidebar/Playlists.vue
  29. 2 2
      frontend/src/pages/Station/Sidebar/Users.vue
  30. 2 2
      frontend/src/pages/Station/Sidebar/index.vue
  31. 3 3
      frontend/src/pages/Station/index.vue
  32. 2 2
      frontend/src/pages/Team.vue
  33. 1 0
      frontend/src/styles/variables.less

+ 17 - 17
frontend/src/App.vue

@@ -813,7 +813,7 @@ img {
 	top: 50px;
 	right: 50px;
 	font-size: 2em;
-	border-radius: 5px;
+	border-radius: @border-radius;
 	z-index: 10000000;
 }
 
@@ -1092,7 +1092,7 @@ img {
 			font-size: 15.5px;
 			min-height: 36px;
 			background: var(--light-grey);
-			border-radius: 5px;
+			border-radius: @border-radius;
 			cursor: pointer;
 
 			.checkbox-control {
@@ -1239,7 +1239,7 @@ img {
 		border: 1px solid var(--light-grey-2);
 		color: var(--dark-grey-2);
 		appearance: none;
-		border-radius: 3px;
+		border-radius: @border-radius;
 		font-size: 14px;
 		line-height: 24px;
 		padding-left: 8px;
@@ -1259,7 +1259,7 @@ img {
 		background-color: var(--white);
 		border: 1px solid var(--light-grey-2);
 		appearance: none;
-		border-radius: 3px;
+		border-radius: @border-radius;
 		cursor: pointer;
 		position: relative;
 
@@ -1325,7 +1325,7 @@ button.delete:focus {
 	width: 100%;
 	border-collapse: collapse;
 	border-spacing: 0;
-	border-radius: 5px;
+	border-radius: @border-radius;
 
 	thead th {
 		padding: 5px 10px;
@@ -1349,7 +1349,7 @@ button.delete:focus {
 	border: 1px solid var(--light-grey-2);
 	background-color: var(--white);
 	color: var(--dark-grey-2);
-	border-radius: 3px;
+	border-radius: @border-radius;
 	line-height: 24px;
 	align-items: center;
 	display: inline-flex;
@@ -1420,7 +1420,7 @@ button.delete:focus {
 	padding-right: 8px;
 	line-height: 24px;
 	font-size: 14px;
-	border-radius: 3px;
+	border-radius: @border-radius;
 	box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
 	border: 1px solid var(--light-grey-2);
 }
@@ -1489,11 +1489,11 @@ button.delete:focus {
 			margin-right: -1px;
 
 			&:first-child {
-				border-radius: 3px 0 0 3px;
+				border-radius: @border-radius 0 0 @border-radius;
 			}
 
 			&:last-child {
-				border-radius: 0 3px 3px 0;
+				border-radius: 0 @border-radius @border-radius 0;
 				padding-left: 10px;
 			}
 		}
@@ -1502,7 +1502,7 @@ button.delete:focus {
 			margin-right: -1px;
 
 			&:first-child {
-				border-radius: 3px 0 0 3px;
+				border-radius: @border-radius 0 0 @border-radius;
 			}
 		}
 	}
@@ -1517,14 +1517,14 @@ button.delete:focus {
 	select {
 		width: 100%;
 		height: 36px;
-		border-radius: 3px 0 0 3px;
+		border-radius: @border-radius 0 0 @border-radius;
 		border-right: 0;
 		border-color: var(--light-grey-3);
 	}
 
 	.button {
 		height: 36px;
-		border-radius: 0 3px 3px 0;
+		border-radius: 0 @border-radius @border-radius 0;
 	}
 }
 
@@ -1589,14 +1589,14 @@ h4.section-title {
 	justify-content: space-between;
 	padding: 7.5px;
 	border: 1px solid var(--light-grey-3);
-	border-radius: 3px;
+	border-radius: @border-radius;
 	overflow: hidden;
 
 	.item-thumbnail {
 		width: 65px;
 		height: 65px;
 		margin: -7.5px;
-		border-radius: 3px 0 0 3px;
+		border-radius: @border-radius 0 0 @border-radius;
 	}
 
 	.item-title {
@@ -1776,7 +1776,7 @@ h4.section-title {
 }
 
 .content-box {
-	border-radius: 3px;
+	border-radius: @border-radius;
 	background-color: var(--white);
 	border: 1px solid var(--dark-grey);
 	max-width: 580px;
@@ -1848,7 +1848,7 @@ h4.section-title {
 
 .news-item {
 	font-family: "Karla";
-	border-radius: 5px;
+	border-radius: @border-radius;
 	padding: 20px;
 	border: unset !important;
 	box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
@@ -2023,7 +2023,7 @@ html {
 	background-color: var(--light-grey);
 	color: var(--primary-color);
 	padding: 5px 10px;
-	border-radius: 5px;
+	border-radius: @border-radius;
 	font-size: 14px;
 	font-weight: 600;
 	white-space: nowrap;

+ 1 - 1
frontend/src/components/ActivityItem.vue

@@ -205,7 +205,7 @@ export default {
 .activity-item {
 	height: 72px;
 	border: 0.5px var(--light-grey-3) solid;
-	border-radius: 3px;
+	border-radius: @border-radius;
 	padding: 0;
 
 	.thumbnail {

+ 9 - 9
frontend/src/components/AdvancedTable.vue

@@ -2037,7 +2037,7 @@ export default {
 }
 
 .table-outer-container {
-	border-radius: 5px;
+	border-radius: @border-radius;
 	box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
 	margin: 10px 0;
 	overflow: hidden;
@@ -2309,7 +2309,7 @@ export default {
 			border: 1px solid var(--light-grey-2);
 			color: var(--dark-grey-2);
 			appearance: none;
-			border-radius: 3px;
+			border-radius: @border-radius;
 			font-size: 14px;
 			line-height: 34px;
 			padding-left: 8px;
@@ -2330,7 +2330,7 @@ export default {
 			& > select,
 			& > .button,
 			&.label {
-				border-radius: 5px 0 0 5px;
+				border-radius: @border-radius 0 0 @border-radius;
 			}
 		}
 		&:last-child {
@@ -2338,7 +2338,7 @@ export default {
 			& > select,
 			& > .button,
 			&.label {
-				border-radius: 0 5px 5px 0;
+				border-radius: 0 @border-radius @border-radius 0;
 			}
 		}
 		& > .button {
@@ -2358,20 +2358,20 @@ export default {
 			.control {
 				margin-bottom: 0 !important;
 				&:nth-child(1) > select {
-					border-radius: 5px 0 0 0;
+					border-radius: @border-radius 0 0 0;
 				}
 				&:nth-child(2) > select {
-					border-radius: 0 5px 0 0;
+					border-radius: 0 @border-radius 0 0;
 				}
 				/deep/ &:nth-child(3) {
 					& > input,
 					& > div > input,
 					& > select {
-						border-radius: 0 0 0 5px;
+						border-radius: 0 0 0 @border-radius;
 					}
 				}
 				&:nth-child(4) > button {
-					border-radius: 0 0 5px 0;
+					border-radius: 0 0 @border-radius 0;
 				}
 			}
 		}
@@ -2406,7 +2406,7 @@ export default {
 	line-height: 36px;
 	z-index: 5;
 	border: 1px solid var(--light-grey-3);
-	border-radius: 5px;
+	border-radius: @border-radius;
 	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
 	background-color: var(--white);
 	color: var(--dark-grey);

+ 1 - 1
frontend/src/components/AutoSuggest.vue

@@ -171,7 +171,7 @@ export default {
 	}
 
 	.autosuggest-item:last-child {
-		border-radius: 0 0 3px 3px;
+		border-radius: 0 0 @border-radius @border-radius;
 	}
 }
 </style>

+ 1 - 1
frontend/src/components/FloatingBox.vue

@@ -154,7 +154,7 @@ export default {
 	resize: both;
 	overflow: auto;
 	border: 1px solid var(--light-grey-2);
-	border-radius: 5px;
+	border-radius: @border-radius;
 	min-height: 50px !important;
 	min-width: 50px !important;
 	padding: 0;

+ 2 - 2
frontend/src/components/Modal.vue

@@ -204,7 +204,7 @@ export default {
 
 		.modal-card-head {
 			border-bottom: 1px solid var(--light-grey-2);
-			border-radius: 5px 5px 0 0;
+			border-radius: @border-radius @border-radius 0 0;
 
 			.modal-card-title {
 				display: flex;
@@ -228,7 +228,7 @@ export default {
 
 		.modal-card-foot {
 			border-top: 1px solid var(--light-grey-2);
-			border-radius: 0 0 5px 5px;
+			border-radius: 0 0 @border-radius @border-radius;
 			overflow-x: auto;
 			column-gap: 16px;
 

+ 1 - 1
frontend/src/components/PunishmentItem.vue

@@ -126,7 +126,7 @@ export default {
 		align-items: center;
 		justify-content: space-evenly;
 		border: 1px solid var(--light-grey-3);
-		border-radius: 5px;
+		border-radius: @border-radius;
 
 		.checkbox-control .slider {
 			cursor: default;

+ 1 - 1
frontend/src/components/Queue.vue

@@ -304,7 +304,7 @@ export default {
 
 #queue {
 	background-color: var(--white);
-	border-radius: 0 0 5px 5px;
+	border-radius: 0 0 @border-radius @border-radius;
 	user-select: none;
 
 	.actionable-button-hidden {

+ 1 - 1
frontend/src/components/modals/EditNews.vue

@@ -251,7 +251,7 @@ export default {
 	#preview {
 		padding: 5px;
 		border: 1px solid var(--light-grey-3) !important;
-		border-radius: 5px;
+		border-radius: @border-radius;
 		height: calc(100vh - 280px);
 		width: 100%;
 	}

+ 4 - 4
frontend/src/components/modals/EditPlaylist/index.vue

@@ -604,7 +604,7 @@ export default {
 			}
 		}
 		.right-section .section {
-			border-radius: 5px;
+			border-radius: @border-radius;
 		}
 	}
 }
@@ -638,7 +638,7 @@ export default {
 		max-width: 100%;
 
 		.button {
-			border-radius: 5px 5px 0 0;
+			border-radius: @border-radius @border-radius 0 0;
 			border: 0;
 			text-transform: uppercase;
 			font-size: 14px;
@@ -660,7 +660,7 @@ export default {
 	}
 	.tab {
 		border: 1px solid var(--light-grey-3);
-		border-radius: 0 0 5px 5px;
+		border-radius: 0 0 @border-radius @border-radius;
 	}
 }
 
@@ -699,7 +699,7 @@ export default {
 	.left-section {
 		#playlist-info-section {
 			border: 1px solid var(--light-grey-3);
-			border-radius: 3px;
+			border-radius: @border-radius;
 			padding: 15px !important;
 
 			h3 {

+ 4 - 4
frontend/src/components/modals/EditSong/Tabs/Discogs.vue

@@ -391,7 +391,7 @@ export default {
 	.selected-discogs-info {
 		background-color: var(--white);
 		border: 1px solid var(--light-grey-3);
-		border-radius: 3px;
+		border-radius: @border-radius;
 		margin-bottom: 16px;
 
 		.selected-discogs-info-none {
@@ -408,7 +408,7 @@ export default {
 		.api-result {
 			background-color: var(--white);
 			border: 0.5px solid var(--light-grey-3);
-			border-radius: 3px;
+			border-radius: @border-radius;
 			margin-bottom: 16px;
 		}
 	}
@@ -427,11 +427,11 @@ export default {
 
 		.track:first-child {
 			margin-top: 0;
-			border-radius: 3px 3px 0 0;
+			border-radius: @border-radius @border-radius 0 0;
 		}
 
 		.track:last-child {
-			border-radius: 0 0 3px 3px;
+			border-radius: 0 0 @border-radius @border-radius;
 		}
 
 		.track {

+ 3 - 3
frontend/src/components/modals/EditSong/Tabs/Reports.vue

@@ -354,7 +354,7 @@ export default {
 	.report-item {
 		background-color: var(--white);
 		border: 0.5px solid var(--primary-color);
-		border-radius: 5px;
+		border-radius: @border-radius;
 		padding: 8px;
 
 		&:not(:first-of-type) {
@@ -380,11 +380,11 @@ export default {
 				display: flex;
 
 				&:first-child {
-					border-radius: 3px 3px 0 0;
+					border-radius: @border-radius @border-radius 0 0;
 				}
 
 				&:last-child {
-					border-radius: 0 0 3px 3px;
+					border-radius: 0 0 @border-radius @border-radius;
 				}
 
 				&.report-sub-item-resolved {

+ 5 - 5
frontend/src/components/modals/EditSong/index.vue

@@ -1794,7 +1794,7 @@ export default {
 				width: 530px;
 				display: block;
 				border: 1px rgba(163, 224, 255, 0.75) solid;
-				border-radius: 5px 5px 0px 0px;
+				border-radius: @border-radius @border-radius 0px 0px;
 				display: flex;
 				align-items: center;
 
@@ -1808,7 +1808,7 @@ export default {
 
 			.player-footer {
 				border: 1px solid var(--light-grey-3);
-				border-radius: 0px 0px 3px 3px;
+				border-radius: 0px 0px @border-radius @border-radius;
 				display: flex;
 				justify-content: space-between;
 				height: 54px;
@@ -1971,7 +1971,7 @@ export default {
 		border: 1px solid var(--light-grey-3);
 		flex: 1;
 		margin-top: 16px;
-		border-radius: 3px;
+		border-radius: @border-radius;
 
 		.album-get-button {
 			background-color: var(--purple);
@@ -2132,7 +2132,7 @@ export default {
 			overflow-x: auto;
 
 			.button {
-				border-radius: 5px 5px 0 0;
+				border-radius: @border-radius @border-radius 0 0;
 				border: 0;
 				text-transform: uppercase;
 				font-size: 14px;
@@ -2154,7 +2154,7 @@ export default {
 		}
 		.tab {
 			border: 1px solid var(--light-grey-3);
-			border-radius: 0 0 5px 5px;
+			border-radius: 0 0 @border-radius @border-radius;
 			padding: 15px;
 			height: calc(100% - 32px);
 			overflow: auto;

+ 3 - 3
frontend/src/components/modals/EditSongs.vue

@@ -477,7 +477,7 @@ export default {
 	max-height: calc(100vh - 40px);
 	overflow: auto;
 	margin-right: 8px;
-	border-radius: 5px;
+	border-radius: @border-radius;
 
 	.sidebar-head,
 	.sidebar-foot {
@@ -492,7 +492,7 @@ export default {
 
 	.sidebar-head {
 		border-bottom: 1px solid var(--light-grey-2);
-		border-radius: 5px 5px 0 0;
+		border-radius: @border-radius @border-radius 0 0;
 
 		.sidebar-title {
 			display: flex;
@@ -563,7 +563,7 @@ export default {
 
 	.sidebar-foot {
 		border-top: 1px solid var(--light-grey-2);
-		border-radius: 0 0 5px 5px;
+		border-radius: 0 0 @border-radius @border-radius;
 
 		.button {
 			flex: 1;

+ 11 - 11
frontend/src/components/modals/ImportAlbum.vue

@@ -774,7 +774,7 @@ export default {
 		overflow-x: auto;
 
 		.button {
-			border-radius: 5px 5px 0 0;
+			border-radius: @border-radius @border-radius 0 0;
 			border: 0;
 			text-transform: uppercase;
 			font-size: 14px;
@@ -796,7 +796,7 @@ export default {
 	}
 	.tab {
 		border: 1px solid var(--light-grey-3);
-		border-radius: 0 0 3px 3px;
+		border-radius: 0 0 @border-radius @border-radius;
 		padding: 15px;
 		height: calc(100% - 32px);
 		overflow: auto;
@@ -881,7 +881,7 @@ export default {
 		.api-result {
 			background-color: var(--white);
 			border: 0.5px solid var(--primary-color);
-			border-radius: 5px;
+			border-radius: @border-radius;
 			margin-bottom: 16px;
 		}
 
@@ -899,11 +899,11 @@ export default {
 
 			.track:first-child {
 				margin-top: 0;
-				border-radius: 3px 3px 0 0;
+				border-radius: @border-radius @border-radius 0 0;
 			}
 
 			.track:last-child {
-				border-radius: 0 0 3px 3px;
+				border-radius: 0 0 @border-radius @border-radius;
 			}
 
 			.track {
@@ -1006,11 +1006,11 @@ export default {
 
 				.track:first-child {
 					margin-top: 0;
-					border-radius: 3px 3px 0 0;
+					border-radius: @border-radius @border-radius 0 0;
 				}
 
 				.track:last-child {
-					border-radius: 0 0 3px 3px;
+					border-radius: 0 0 @border-radius @border-radius;
 				}
 
 				.track {
@@ -1047,7 +1047,7 @@ export default {
 	width: 376px;
 	background-color: var(--light-grey);
 	border: 1px rgba(163, 224, 255, 0.75) solid;
-	border-radius: 5px;
+	border-radius: @border-radius;
 	padding: 16px;
 	overflow: auto;
 	height: 100%;
@@ -1061,18 +1061,18 @@ export default {
 	width: 376px;
 	background-color: var(--light-grey);
 	border: 1px rgba(163, 224, 255, 0.75) solid;
-	border-radius: 5px;
+	border-radius: @border-radius;
 	padding: 16px;
 	overflow: auto;
 	height: 100%;
 
 	.track-box:first-child {
 		margin-top: 0;
-		border-radius: 3px 3px 0 0;
+		border-radius: @border-radius @border-radius 0 0;
 	}
 
 	.track-box:last-child {
-		border-radius: 0 0 3px 3px;
+		border-radius: 0 0 @border-radius @border-radius;
 	}
 
 	.track-box {

+ 1 - 1
frontend/src/components/modals/ManageStation/Tabs/Settings.vue

@@ -572,7 +572,7 @@ export default {
 			width: 100%;
 			height: 36px;
 			border: 0;
-			border-radius: 3px;
+			border-radius: @border-radius;
 			font-size: 18px;
 			color: var(--white);
 			box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);

+ 1 - 1
frontend/src/components/modals/ManageStation/Tabs/Songs.vue

@@ -431,7 +431,7 @@ export default {
 
 	#playlist-info-section {
 		border: 1px solid var(--light-grey-3);
-		border-radius: 3px;
+		border-radius: @border-radius;
 		padding: 15px !important;
 		margin-bottom: 16px;
 

+ 4 - 4
frontend/src/components/modals/ManageStation/index.vue

@@ -692,7 +692,7 @@ export default {
 		}
 		.right-section .section,
 		#queue {
-			border-radius: 5px;
+			border-radius: @border-radius;
 			background-color: transparent !important;
 		}
 	}
@@ -709,7 +709,7 @@ export default {
 			display: flex;
 			flex-direction: column;
 			flex-grow: unset;
-			border-radius: 5px;
+			border-radius: @border-radius;
 			margin: 0 0 20px 0;
 			background-color: var(--white);
 			border: 1px solid var(--light-grey-3);
@@ -763,7 +763,7 @@ export default {
 			overflow-x: auto;
 
 			.button {
-				border-radius: 5px 5px 0 0;
+				border-radius: @border-radius @border-radius 0 0;
 				border: 0;
 				text-transform: uppercase;
 				font-size: 14px;
@@ -786,7 +786,7 @@ export default {
 		.tab {
 			border: 1px solid var(--light-grey-3);
 			padding: 15px;
-			border-radius: 0 0 5px 5px;
+			border-radius: 0 0 @border-radius @border-radius;
 		}
 	}
 	.right-section {

+ 2 - 2
frontend/src/components/modals/Report.vue

@@ -443,7 +443,7 @@ export default {
 	}
 	.columns {
 		background-color: var(--dark-grey-3) !important;
-		border-radius: 5px;
+		border-radius: @border-radius;
 	}
 }
 
@@ -465,7 +465,7 @@ export default {
 			margin-bottom: 20px;
 			padding: 20px;
 			background-color: var(--light-grey);
-			border-radius: 5px;
+			border-radius: @border-radius;
 		}
 	}
 

+ 1 - 1
frontend/src/components/modals/RequestSong.vue

@@ -275,7 +275,7 @@ export default {
 	max-height: 500px;
 	overflow: auto;
 	border: 1px solid var(--light-grey-3);
-	border-radius: 3px;
+	border-radius: @border-radius;
 
 	.search-query-item:not(:last-of-type) {
 		margin-bottom: 10px;

+ 2 - 2
frontend/src/components/modals/ViewReport.vue

@@ -276,11 +276,11 @@ export default {
 			display: flex;
 
 			&:first-child {
-				border-radius: 3px 3px 0 0;
+				border-radius: @border-radius @border-radius 0 0;
 			}
 
 			&:last-child {
-				border-radius: 0 0 3px 3px;
+				border-radius: 0 0 @border-radius @border-radius;
 			}
 
 			&.report-sub-item-resolved {

+ 1 - 1
frontend/src/pages/About.vue

@@ -85,7 +85,7 @@ export default {
 	flex-direction: column;
 	padding: 20px;
 	margin: 10px 10px 50px 10px;
-	border-radius: 5px;
+	border-radius: @border-radius;
 	overflow: hidden;
 	background-color: var(--white);
 	color: var(--dark-grey);

+ 1 - 1
frontend/src/pages/Admin/tabs/Punishments.vue

@@ -332,7 +332,7 @@ export default {
 	flex-direction: column;
 	padding: 20px;
 	margin: 10px 0;
-	border-radius: 5px;
+	border-radius: @border-radius;
 	background-color: var(--white);
 	color: var(--dark-grey);
 	box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);

+ 1 - 1
frontend/src/pages/Admin/tabs/Statistics.vue

@@ -266,7 +266,7 @@ td {
 	flex-direction: column;
 	padding: 20px;
 	margin: 10px;
-	border-radius: 5px;
+	border-radius: @border-radius;
 	background-color: var(--white);
 	color: var(--dark-grey);
 	box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);

+ 2 - 2
frontend/src/pages/Home.vue

@@ -1027,7 +1027,7 @@ html {
 				.register {
 					margin: 5px 10px;
 					padding: 10px 15px;
-					border-radius: 5px;
+					border-radius: @border-radius;
 					font-size: 18px;
 					width: 100%;
 					max-width: 250px;
@@ -1148,7 +1148,7 @@ html {
 	width: calc(100% - 30px);
 	max-width: 400px;
 	flex-wrap: wrap;
-	border-radius: 5px;
+	border-radius: @border-radius;
 	box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
 
 	.card-content {

+ 3 - 3
frontend/src/pages/Profile/index.vue

@@ -299,7 +299,7 @@ export default {
 		font-size: 12px;
 		line-height: 14px;
 		height: 18px;
-		border-radius: 5px;
+		border-radius: @border-radius;
 		margin-left: 12px;
 
 		&.admin {
@@ -402,7 +402,7 @@ export default {
 			width: 100%;
 			text-align: left;
 			cursor: pointer;
-			border-radius: 5px;
+			border-radius: @border-radius;
 			background-color: transparent;
 
 			&.active {
@@ -417,7 +417,7 @@ export default {
 		max-width: 100%;
 		background-color: var(--white);
 		padding: 30px 50px;
-		border-radius: 3px;
+		border-radius: @border-radius;
 
 		h3 {
 			font-weight: 400;

+ 2 - 2
frontend/src/pages/Settings/index.vue

@@ -166,7 +166,7 @@ export default {
 	.content {
 		background-color: var(--white);
 		padding: 30px 50px;
-		border-radius: 3px;
+		border-radius: @border-radius;
 	}
 
 	#sidebar-with-content {
@@ -209,7 +209,7 @@ export default {
 			width: 100%;
 			text-align: left;
 			cursor: pointer;
-			border-radius: 5px;
+			border-radius: @border-radius;
 			background-color: transparent;
 			display: inline-block;
 

+ 2 - 2
frontend/src/pages/Station/Sidebar/Playlists.vue

@@ -320,7 +320,7 @@ export default {
 #my-playlists {
 	background-color: var(--white);
 	margin-bottom: 20px;
-	border-radius: 0 0 5px 5px;
+	border-radius: 0 0 @border-radius @border-radius;
 	max-height: 100%;
 }
 
@@ -352,7 +352,7 @@ export default {
 .create-playlist {
 	width: 100%;
 	height: 40px;
-	border-radius: 5px;
+	border-radius: @border-radius;
 	border: 0;
 
 	&:active,

+ 2 - 2
frontend/src/pages/Station/Sidebar/Users.vue

@@ -129,7 +129,7 @@ export default {
 #users {
 	background-color: var(--white);
 	margin-bottom: 20px;
-	border-radius: 0 0 5px 5px;
+	border-radius: 0 0 @border-radius @border-radius;
 	max-height: 100%;
 
 	.menu {
@@ -154,7 +154,7 @@ export default {
 				align-items: center;
 				padding: 5px 10px;
 				border: 0.5px var(--light-grey-3) solid;
-				border-radius: 3px;
+				border-radius: @border-radius;
 				cursor: pointer;
 
 				&:hover {

+ 2 - 2
frontend/src/pages/Station/Sidebar/index.vue

@@ -94,7 +94,7 @@ export default {
 	overflow-x: auto;
 
 	.button {
-		border-radius: 5px 5px 0 0;
+		border-radius: @border-radius @border-radius 0 0;
 		border: 0;
 		text-transform: uppercase;
 		font-size: 17px;
@@ -127,7 +127,7 @@ export default {
 /deep/ .tab-actionable-button {
 	width: calc(100% - 20px);
 	height: 40px;
-	border-radius: 5px;
+	border-radius: @border-radius;
 	margin: 10px;
 	position: absolute;
 	bottom: 0;

+ 3 - 3
frontend/src/pages/Station/index.vue

@@ -2461,7 +2461,7 @@ export default {
 		}
 
 		.quadrant {
-			border-radius: 5px;
+			border-radius: @border-radius;
 			margin: 10px;
 		}
 
@@ -2550,7 +2550,7 @@ export default {
 			display: flex;
 			flex-direction: column;
 			border: 1px solid var(--light-grey-3);
-			border-radius: 5px;
+			border-radius: @border-radius;
 			overflow: hidden;
 
 			&.nothing-here-text {
@@ -2798,7 +2798,7 @@ export default {
 							margin-bottom: 0 !important;
 							button.disabled {
 								filter: grayscale(0.4);
-								border-radius: 3px;
+								border-radius: @border-radius;
 								&::after {
 									margin-right: 100%;
 								}

+ 2 - 2
frontend/src/pages/Team.vue

@@ -302,7 +302,7 @@ h2 {
 		a {
 			background: var(--white);
 			padding: 10px;
-			border-radius: 5px;
+			border-radius: @border-radius;
 			white-space: nowrap;
 			margin-top: 5px;
 			font-size: 16px;
@@ -333,7 +333,7 @@ h2 {
 		max-width: 400px;
 		margin: 10px;
 		text-align: left;
-		border-radius: 5px;
+		border-radius: @border-radius;
 		box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1),
 			0 0 0 1px rgba(10, 10, 10, 0.1);
 		.card-header {

+ 1 - 0
frontend/src/styles/variables.less

@@ -0,0 +1 @@
+@border-radius: 5px;