Repository: Mintplex-Labs/anything-llm
File: frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx (JavaScript)

Code before:
                          }
                          data-tooltip-id="workspace-name"
                          data-tooltip-content={workspace.name}
                          aria-current={isActive ? "page" : ""}
                          className={`
                            transition-all duration-[200ms]
                            flex flex-grow w-[75%] gap-x-2 py-[6px] pl-[4px] pr-[6px] rounded-[4px] text-white justify-start items-center
                            bg-theme-sidebar-item-default
                            ${isActive ? "bg-theme-sidebar-item-selected font-bold" : "hover:bg-theme-sidebar-subitem-hover"}
                          `}
                        >
                          <div className="flex flex-row justify-between w-full items-center">
                            <div
                              {...provided.dragHandleProps}
                              className="cursor-grab mr-[3px]"
                            >
                              <DotsSixVertical
                                size={18}
                                className={`${isActive ? "text-white light:text-blue-800" : ""}`}
                                weight={
                                  isActive ||
                                  hoveredWsId === workspace.id ||
                                  snapshot.isDragging
                                    ? "fill"
                                    : "regular"
                                }
                              />
                            </div>
                            <div className="flex items-center space-x-2 overflow-hidden flex-grow">
                              <div className="w-[130px] overflow-hidden">
                                <p
                                  className={`
                                  text-[14px] leading-loose whitespace-nowrap overflow-hidden
                                  ${isActive ? "font-bold text-white light:text-blue-800" : "font-medium group-hover:font-bold"} truncate
                                  w-full group-hover:w-[130px] group-hover:duration-200
                                `}
                                >
                                  {workspace.name}
                                </p>
                              </div>
                            </div>
                            {user?.role !== "default" && (
                              <div
                                className={`flex items-center gap-x-[2px] transition-opacity duration-200 ${isActive ? "opacity-100" : "opacity-0 group-hover:opacity-100"}`}
                              >
                                <button
                                  type="button"
                                  onClick={(e) => {
                                    e.preventDefault();
                                    setSelectedWs(workspace);
                                    showModal();

Review comment (suggestion):
Let's not change the size/weight here of the `DotsSixVertical` icon. Revert back to it's original weight but keep the color changes.

Code after:
                          aria-current={isActive ? "page" : ""}
                          className={`
                            transition-all duration-[200ms]
                            flex flex-grow w-[75%] gap-x-2 py-[6px] pl-[4px] pr-[6px] rounded-[4px] text-white justify-start items-center
                            bg-theme-sidebar-item-default
                            ${isActive ? "light:bg-blue-200 font-bold" : "hover:bg-theme-sidebar-subitem-hover light:hover:bg-slate-300"}
                          `}
                        >
                          <div className="flex flex-row justify-between w-full items-center">
                            <div
                              {...provided.dragHandleProps}
                              className="cursor-grab mr-[3px]"
                            >
                              <DotsSixVertical
                                size={20}
                                className={`${isActive ? "text-white light:text-blue-800" : ""}`}
                                weight="bold"
                              />
                            </div>
                            <div className="flex items-center space-x-2 overflow-hidden flex-grow">
                              <div className="w-[130px] overflow-hidden">
                                <p
                                  className={`
                                  text-[14px] leading-loose whitespace-nowrap overflow-hidden
                                  ${isActive ? "font-bold text-white light:text-blue-900" : "font-medium "} truncate
                                  w-full group-hover:w-[130px] group-hover:duration-200
                                `}
                                >
                                  {workspace.name}
                                </p>
                              </div>
                            </div>
                            {user?.role !== "default" && (
                              <div
                                className={`flex items-center gap-x-[2px] transition-opacity duration-200 ${isActive ? "opacity-100" : "opacity-0 group-hover:opacity-100"}`}
                              >
                                <button
                                  type="button"
                                  onClick={(e) => {
                                    e.preventDefault();
                                    setSelectedWs(workspace);
                                    showModal();
                                  }}
                                  className={`group/upload border-none rounded-md flex items-center justify-center ml-auto p-[2px] ${isActive ? "hover:bg-zinc-500 light:hover:bg-sky-800/30" : "hover:bg-zinc-500 light:hover:bg-slate-400"}`}
                                >
                                  <UploadSimple
                                    className={`h-[20px] w-[20px] ${isActive ? "text-zinc-400 hover:text-white light:text-blue-700 light:group-hover/upload:text-blue-900" : "text-zinc-400 hover:text-white light:text-slate-600 light:group-hover/upload:text-slate-950"}`}
                                  />
                                </button>
                                <button
                                  onClick={(e) => {