Update Cards shadow (#4787)

* Update Cards box-shadow

* Undo import order change

app/assets/stylesheets/application.bootstrap.scss

@@ -13,8 +13,6 @@
 @import 'pagination';
 @import 'fonts';
 
-
-
 html,
 body {
   overflow-x: hidden;
@@ -172,6 +170,10 @@ input.search-bar {
   width: 100px;
 }
 
+.card-shadow {
+  box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06) !important;
+}
+
 #footer {
   margin-top: $footer-buffer-height;
   max-height: $footer-height;

app/javascript/components/admin/manage_users/EditUser.jsx

@@ -25,7 +25,7 @@ export default function EditUser() {
   return (
     <div id="admin-panel" className="pb-3">
       <h3 className="py-5"> { t('admin.admin_panel') } </h3>
-      <Card className="border-0 shadow-sm">
+      <Card className="border-0 card-shadow">
         <Tab.Container activekey="users">
           <Container>
             <Row>

app/javascript/components/admin/manage_users/ManageUsers.jsx

@@ -31,7 +31,7 @@ export default function ManageUsers() {
   return (
     <div id="admin-panel" className="pb-3">
       <h3 className="py-5">{ t('admin.admin_panel') }</h3>
-      <Card className="border-0 shadow-sm">
+      <Card className="border-0 card-shadow">
         <Tab.Container activeKey="users">
           <Row>
             <Col className="pe-0" sm={3}>

app/javascript/components/admin/roles/EditRole.jsx

@@ -30,7 +30,7 @@ export default function EditRole() {
   return (
     <div id="admin-panel" className="pb-3">
       <h3 className="py-5">{ t('admin.admin_panel') }</h3>
-      <Card className="border-0 shadow-sm">
+      <Card className="border-0 card-shadow">
         <Tab.Container activeKey="roles">
           <Row>
             <Col className="pe-0" sm={3}>

app/javascript/components/admin/roles/Roles.jsx

@@ -25,7 +25,7 @@ export default function Roles() {
   return (
     <div id="admin-panel" className="pb-3">
       <h3 className="py-5"> { t('admin.admin_panel') } </h3>
-      <Card className="border-0 shadow-sm">
+      <Card className="border-0 card-shadow">
         <Tab.Container activeKey="roles">
           <Row>
             <Col className="pe-0" sm={3}>

app/javascript/components/admin/room_configuration/RoomConfig.jsx

@@ -23,7 +23,7 @@ export default function RoomConfig() {
   return (
     <div id="admin-panel" className="pb-3">
       <h3 className="py-5"> { t('admin.admin_panel') } </h3>
-      <Card className="border-0 shadow-sm">
+      <Card className="border-0 card-shadow">
         <Tab.Container activeKey="room_configuration">
           <Row>
             <Col className="pe-0" sm={3}>

app/javascript/components/admin/server_recordings/ServerRecordings.jsx

@@ -24,7 +24,7 @@ export default function ServerRecordings() {
   return (
     <div id="admin-panel" className="pb-3">
       <h3 className="py-5"> {t('admin.admin_panel')} </h3>
-      <Card className="border-0 shadow-sm">
+      <Card className="border-0 card-shadow">
         <Tab.Container activeKey="server_recordings">
           <Row>
             <Col className="pe-0" sm={3}>

app/javascript/components/admin/server_rooms/ServerRooms.jsx

@@ -30,7 +30,7 @@ export default function ServerRooms() {
   return (
     <div id="admin-panel" className="pb-3">
       <h3 className="py-5"> { t('admin.admin_panel') } </h3>
-      <Card className="border-0 shadow-sm">
+      <Card className="border-0 card-shadow">
         <Tab.Container activeKey="server_rooms">
           <Row>
             <Col className="pe-0" sm={3}>

app/javascript/components/admin/site_settings/SiteSettings.jsx

@@ -23,7 +23,7 @@ export default function SiteSettings() {
   return (
     <div id="admin-panel" className="pb-3">
       <h3 className="py-5">{ t('admin.admin_panel') }</h3>
-      <Card className="border-0 shadow-sm">
+      <Card className="border-0 card-shadow">
         <Tab.Container activeKey="site_settings">
           <Row>
             <Col className="pe-0" sm={3}>

app/javascript/components/admin/site_settings/appearance/BrandColorPopover.jsx

@@ -50,7 +50,7 @@ export default function BrandColorPopover({
       show={show}
       overlay={(
         <Popover className="border-0">
-          <div className="color-picker rounded-3 shadow-sm">
+          <div className="color-picker rounded-3 card-shadow">
             <HexColorPicker color={color} onChange={handleChange} />
             <div className="mt-3 px-3">
               <HexColorInput className="w-100 form-control" color={color} onChange={handleChange} prefixed />

app/javascript/components/errors/DefaultErrorPage.jsx

@@ -19,7 +19,7 @@ export default function DefaultErrorPage() {
       <div className="text-center pb-4">
         <Logo />
       </div>
-      <Card className="col-md-3 mx-auto p-4 border-0 shadow-sm text-center">
+      <Card className="col-md-3 mx-auto p-4 border-0 card-shadow text-center">
         <Card.Title className="pb-2 fs-1 text-danger">{ t('global_error_page.title') }</Card.Title>
         <span className="mb-3">{ t('global_error_page.message') }</span>
         <ButtonLink to="/" variant="brand" className="btn btn-lg m-2">

app/javascript/components/errors/NotFoundPage.jsx

@@ -19,7 +19,7 @@ export default function NotFoundPage() {
       <div className="text-center pb-4">
         <Logo />
       </div>
-      <Card className="col-md-3 mx-auto p-4 border-0 shadow-sm text-center">
+      <Card className="col-md-3 mx-auto p-4 border-0 card-shadow text-center">
         <Card.Title className="pb-2 fs-1 text-danger">{ t('not_found_error_page.title') }</Card.Title>
         <span className="mb-3">{ t('not_found_error_page.message') }</span>
         <ButtonLink to="/" variant="brand" className="btn btn-lg m-2">

app/javascript/components/home/HomepageFeatureCard.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 
 export default function HomepageFeatureCard({ title, description, icon }) {
   return (
-    <Card className="homepage-card h-100 shadow-sm border-0">
+    <Card className="homepage-card h-100 card-shadow border-0">
       <Card.Body className="p-4">
         <div className="homepage-card-icon-circle rounded-circle mb-4 d-flex align-items-center justify-content-center">
           { icon }

app/javascript/components/recordings/EmptyRecordingsList.jsx

@@ -8,7 +8,7 @@ export default function EmptyRecordingsList() {
 
   return (
     <div className="pt-3">
-      <Card className="border-0 shadow-sm text-center">
+      <Card className="border-0 card-shadow text-center">
         <Card.Body className="py-5">
           <div className="icon-circle rounded-circle d-block mx-auto mb-3">
             <VideoCameraIcon className="hi-l pt-4 text-brand d-block mx-auto" />

app/javascript/components/recordings/RecordingsList.jsx

@@ -34,7 +34,7 @@ export default function RecordingsList({
               <NoSearchResults text={t('recording.search_not_found')} searchInput={searchInput} />
             </div>
           ) : (
-            <Card className="border-0 shadow-sm p-0 mt-4 mb-5">
+            <Card className="border-0 card-shadow p-0 mt-4 mb-5">
               <Table id="recordings-table" className="table-bordered border border-2 mb-0 recordings-list" hover responsive>
                 <thead>
                   <tr className="text-muted small">

app/javascript/components/rooms/CantCreateRoom.jsx

@@ -13,7 +13,7 @@ export default function CantCreateRoom() {
       <div className="text-center mb-4">
         <Logo />
       </div>
-      <Card className="col-md-8 mx-auto p-5 border-0 shadow-sm text-center">
+      <Card className="col-md-8 mx-auto p-5 border-0 card-shadow text-center">
         <div className="mt-4 px-xxl-5">
           <div className="text-start">
             <h6> { t('homepage.enter_meeting_url') } </h6>

app/javascript/components/rooms/EmptyRoomsList.jsx

@@ -14,7 +14,7 @@ export default function EmptyRoomsList() {
 
   return (
     <div id="rooms-list-empty" className="pt-5">
-      <Card className="border-0 shadow-sm text-center">
+      <Card className="border-0 card-shadow text-center">
         <Card.Body className="py-5">
           <div className="icon-circle rounded-circle d-block mx-auto mb-3">
             <UserBoardIcon className="hi-l text-brand d-block mx-auto" />

app/javascript/components/rooms/RoomCard.jsx

@@ -26,7 +26,7 @@ export default function RoomCard({ room }) {
   }
 
   return (
-    <Card id="room-card" className="h-100 shadow-sm border-0">
+    <Card id="room-card" className="h-100 card-shadow border-0">
       <Card.Body className="pb-0" onClick={handleClick}>
         <Stack direction="horizontal">
           <div className="room-icon rounded">

app/javascript/components/rooms/room/join/RequireAuthentication.jsx

@@ -16,7 +16,7 @@ export default function RequireAuthentication({ path }) {
       <div className="text-center pb-4">
         <Logo />
       </div>
-      <Card className="col-xl-4 col-lg-5 col-md-7 col-8 mx-auto p-0 border-0 shadow-sm text-center">
+      <Card className="col-xl-4 col-lg-5 col-md-7 col-8 mx-auto p-0 border-0 card-shadow text-center">
         <Card.Body className="pt-4 px-5">
           <p className="mb-0">{ t('room.settings.require_signed_in_message') }</p>
         </Card.Body>

app/javascript/components/rooms/room/join/RoomJoin.jsx

@@ -150,7 +150,7 @@ export default function RoomJoin() {
       <div className="text-center pb-4">
         <Logo />
       </div>
-      <Card className="col-md-6 mx-auto p-0 border-0 shadow-sm">
+      <Card className="col-md-6 mx-auto p-0 border-0 card-shadow">
         <Card.Body className="pt-4 px-5">
           <Row>
             <Col className="col-xxl-8">