Fix disabled clip button now that it has a border

Author: iconix

src/scripts/clipperUI/panels/optionsPanel.tsx

@@ -22,21 +22,22 @@ interface OptionsPanelProps extends ClipperStateProp {
 class OptionsPanelClass extends ComponentBase<{ }, OptionsPanelProps> {
 	render() {
 		let clipButtonEnabled = ClipperStateHelperFunctions.clipButtonEnabled(this.props.clipperState);
+		let clipButtonContainerClassName = clipButtonEnabled ? "wideButtonContainer" : "wideButtonContainer disabled";
 
 		return (
 			<div className="optionsPanel">
 				<ModeButtonSelector clipperState={this.props.clipperState} />
 				<SectionPicker onPopupToggle={this.props.onPopupToggle.bind(this)} clipperState={this.props.clipperState} />
 
-				<div id={Constants.Ids.clipButtonContainer} className="wideButtonContainer">
+				<div id={Constants.Ids.clipButtonContainer} className={clipButtonContainerClassName}>
 					{clipButtonEnabled
 					?	<a id={Constants.Ids.clipButton} className="wideActionButton" {...this.enableInvoke(this.props.onStartClip, 1) }>
 							<span className="wideButtonFont"
 								style={Localization.getFontFamilyAsStyle(Localization.FontFamily.Semibold)}>
 								{Localization.getLocalizedString("WebClipper.Action.Clip")}
 							</span>
 						</a>
-					:	<a id={Constants.Ids.clipButton} className="wideActionButton disabled">
+					:	<a id={Constants.Ids.clipButton} className="wideActionButton">
 							<span className="wideButtonFont"
 								style={Localization.getFontFamilyAsStyle(Localization.FontFamily.Semibold)}>
 								{Localization.getLocalizedString("WebClipper.Action.Clip")}

src/styles/mainClassDefinitions.less

@@ -65,12 +65,6 @@
 	user-select: text;
 }
 
-.disabled {
-	cursor: default;
-	background: gray;
-	border-radius: 4px;
-}
-
 .failureMessageFont {
 	font-weight: normal;
 	font-size: 18px;
@@ -237,6 +231,12 @@
 		background: @WideButtonHoverColor;
 		border-color: @WideButtonHoverColor;
 	}
+
+	&.disabled {
+		cursor: default;
+		background: gray;
+		border-color: gray;
+	}
 }
 
 .wideButtonFont {