feat(dynamic-branding): Add custom theme branding (#10335)

- apply theming to various buttons

css/_toolbars.scss

@@ -77,14 +77,6 @@
     }
 }
 
-.toolbox-button {
-    color: $toolbarButtonColor;
-    cursor: pointer;
-    display: inline-block;
-    line-height: $newToolbarSize;
-    text-align: center;
-}
-
 .toolbar-button-with-badge {
     display: inline-block;
     position: relative;
@@ -115,86 +107,6 @@
     padding-bottom: env(safe-area-inset-bottom, 0);
 }
 
-.toolbox-content-items {
-    background: $newToolbarBackgroundColor;
-    border-radius: 6px;
-    margin: 0 auto;
-    padding: 6px;
-    text-align: center;
-    pointer-events: all;
-    box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.15);
-
-    >div {
-        margin-left: 8px;
-
-        &:first-child {
-            margin-left: 0;
-        }
-    }
-}
-
-.overflow-menu {
-    font-size: 14px;
-    list-style-type: none;
-    padding: 8px 0;
-    background-color: $menuBG;
-
-    .profile-text {
-        max-width: 150px;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-    }
-}
-
-.overflow-menu-item {
-    align-items: center;
-    color: $overflowMenuItemColor;
-    cursor: pointer;
-    display: flex;
-    font-size: 14px;
-    font-weight: 400;
-    height: 40px;
-    line-height: 24px;
-    padding: 8px 16px;
-    box-sizing: border-box;
-
-    @media (hover: hover) and (pointer: fine) {
-        &:hover {
-            background: $overflowMenuItemBackground;
-        }
-    }
-
-    div {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-    }
-
-    &.unclickable {
-        cursor: default;
-    }
-    &.disabled {
-        cursor: initial;
-        color: #929292;
-
-        &:hover {
-            background: none;
-        }
-
-        svg {
-            fill: #929292;
-        }
-
-    }
-
-    @media (hover: hover) and (pointer: fine) {
-        &.unclickable:hover {
-            background: inherit;
-        }
-    }
-}
-
 .beta-tag {
     background: #36383C;
     border-radius: 3px;
@@ -205,73 +117,12 @@
     text-transform: uppercase;
 }
 
-.overflow-menu-item-icon {
-    margin-right: 16px;
-
-    i {
-        display: inline;
-        font-size: 24px;
-    }
-
-    @media (hover: hover) and (pointer: fine) {
-        i:hover {
-            background-color: initial;
-        }
-    }
-
-    img {
-        max-width: 24px;
-        max-height: 24px;
-    }
-
-    svg {
-        fill: #fff;
-        height: 20px;
-        width: 20px;
-    }
-}
-
-
 .overflow-menu-hr {
     border-top: 1px solid #4C4D50;
     border-bottom: 0;
     margin: 8px 0;
 }
 
-.toolbox-icon {
-    display: flex;
-    border-radius: 3px;
-    flex-direction: column;
-    font-size: 24px;
-    height: $newToolbarSize;
-    justify-content: center;
-    width: $newToolbarSize;
-
-    @media (hover: hover) and (pointer: fine) {
-        &:hover {
-            background: $newToolbarButtonHoverColor;
-        }
-    }
-
-    @media (max-width: 320px) {
-        height: 36px;
-        width: 36px;
-    }
-
-    &.toggled {
-        background: $newToolbarButtonToggleColor;
-    }
-
-    &.disabled {
-        cursor: initial !important;
-        background-color: #36383c !important;
-
-        svg {
-            fill: #929292 !important;
-        }
-    }
-}
-
 .hangup-button {
     background-color: $hangupColor;