Assorted CSS code style improvements

src/components/events/partials/ModalTabsAndPages/EventDetailsAssetMediaDetails.tsx

@@ -142,9 +142,9 @@ const EventDetailsAssetMediaDetails = () => {
 					{t("EVENTS.EVENTS.DETAILS.ASSETS.STREAMS") /* Streams */}
 				</header>
 				<div className="obj-container">
-					<div className="table-series">
+					<div>
 						{/* table with details for the audio streams */}
-						<div className="wrapper">
+						<div className="media-stream-table-wrapper">
 							<header>
 								{
 									t(
@@ -248,7 +248,7 @@ const EventDetailsAssetMediaDetails = () => {
 						</div>
 
 						{/* table with details for the video streams */}
-						<div className="wrapper">
+						<div className="media-stream-table-wrapper">
 							<header>
 								{
 									t(

src/components/shared/TableActionDropdown.tsx

@@ -53,7 +53,7 @@ const TableActionDropdown = ({
 
 	return (
 		<div
-			className={cn("drop-down-container", { disabled: disabled })}
+			className={cn("action-menu", { disabled: disabled })}
 			aria-disabled={disabled}
 			onClick={e => handleActionMenu(e)}
 			ref={containerAction}
@@ -62,7 +62,7 @@ const TableActionDropdown = ({
 			<LuChevronDown className="chevron-down"/>
 			{/* show dropdown if actions is clicked*/}
 			{displayActionMenu && (
-				<ul className="dropdown-ul">
+				<ul>
 					{actions.map((action, key) =>
 						<Action
 							key={key}

src/components/shared/TimeSeriesStatistics.tsx

@@ -191,20 +191,22 @@ const TimeSeriesStatistics = ({
 		>
 			{formik => (
 				<div className="statistics-graph">
-					{/* download link for a statistic file */}
-					<div className="download">
-						<a
-							href={exportUrl}
-							download={exportFileName(statTitle)}
-						>
-							<LuDownload className="download-icon"/>
-						</a>
-					</div>
+					<div className="stats-header">
+						{/* statistics total value */}
+						<div className="total">
+							<span>{t("STATISTICS.TOTAL") /* Total */}</span>
+							<span>{": " + totalValue}</span>
+						</div>
 
-					{/* statistics total value */}
-					<div className="total">
-						<span>{t("STATISTICS.TOTAL") /* Total */}</span>
-						<span>{": " + totalValue}</span>
+						{/* download link for a statistic file */}
+						<div className="download">
+							<a
+								href={exportUrl}
+								download={exportFileName(statTitle)}
+							>
+								<LuDownload className="download-icon"/>
+							</a>
+						</div>
 					</div>
 
 					{/* radio buttons for selecting the mode of choosing the timeframe of statistic */}

src/components/shared/wizard/SelectContainer.tsx

@@ -191,7 +191,7 @@ const SelectContainer = ({
 
 	return (
 		<div className="row">
-			<div className="multi-select-container offset-col-2">
+			<div className="multi-select-container offset-col">
 				<div className="multi-select-col">
 					<div className="row">
 						<label>

src/styles/base/_layout.scss

@@ -54,14 +54,6 @@ strong {
     font-weight: 600;
 }
 
-.text-left {
-    text-align: left;
-}
-
 .text-center {
     text-align: center;
 }
-
-.text-right {
-    text-align: right;
-}

src/styles/components/_action-menu.scss

@@ -0,0 +1,100 @@
+@use "../base/variables";
+
+/**
+ * Licensed to The Apereo Foundation under one or more contributor license
+ * agreements. See the NOTICE file distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ *
+ * The Apereo Foundation licenses this file to you under the Educational
+ * Community License, Version 2.0 (the "License"); you may not use this file
+ * except in compliance with the License. You may obtain a copy of the License
+ * at:
+ *
+ *   http://opensource.org/licenses/ecl2.txt
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ *
+ */
+
+
+.action-menu {
+    width: 160px;
+    height: 40px;
+    border-radius: variables.$main-border-radius;
+    padding-left: 15px;
+    font-weight: 600;
+    font-size: 12px;
+    cursor: pointer;
+    user-select: none;
+    position: relative;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    // Pulled from Button Mixin (keep in sync with those styles)
+    background: linear-gradient(variables.$white, variables.$color-lightgray);
+    border: variables.$thin-border-stroke variables.$main-border-color;
+    box-shadow: inset 0px 1px 0px 0px variables.$white, 0px 1px 2px variables.$color-button-box-shadow;
+    color: variables.$medium-prim-color;
+    text-shadow: 0px 1px 0px variables.$white;
+
+    &:hover {
+        border: variables.$thin-border-stroke variables.$l-blue;
+        box-shadow: 0 0 0 1px variables.$l-blue;
+    }
+
+    &:active {
+        box-shadow: inset 0px 1px 6px 2px variables.$color-button-box-shadow;
+    }
+
+    .chevron-down {
+        color: inherit;
+        font-size: 12px;
+        margin-right: 10px;
+    }
+
+    > ul {
+        position: absolute;
+        transition: all 200ms;
+        background: variables.$off-white;
+        list-style: none;
+        border-bottom-left-radius: variables.$main-border-radius;
+        border-bottom-right-radius: variables.$main-border-radius;
+        border: variables.$thin-border-stroke variables.$main-border-color;
+        opacity: 1;
+        pointer-events: auto;
+        z-index: variables.$max-z + 10;
+        top: 100%;
+        left: -1px;
+        right: -1px;
+
+        > li {
+            text-decoration: none;
+            text-shadow: 0 1px 0 variables.$white;
+            display: block;
+            position: relative;
+            transition: all 200ms;
+
+            button {
+                display: block;
+                padding: 12px 15px;
+                width: 100%;
+                text-align: left;
+                font-size: inherit;
+                line-height: 20px;
+
+                &:hover, &:focus {
+                    color: variables.$off-white;
+                    background: variables.$bright-blue;
+                }
+            }
+        }
+    }
+}

src/styles/components/_components-config.scss

@@ -23,7 +23,7 @@
 @use "about";
 @use "breadcrumbs";
 @use "datepicker-custom";
-@use "dropdowns";
+@use "action-menu";
 @use "footer";
 @use "form";
 @use "header";